How to display the Configurable List Widget in two different rows using custom CSS code

myform

Hi,

Thank you for contacting us.

Please, allow me some time, I will work in a workaround to display the widgets as you need.

Thanks.

Hi,

I just found a workaround to achieve what you want, I cloned your form and I was able to display the widget in two different columns.

Open the wizard for the first widget and paste this CSS code in the CSS tab : 

td.col3 {

    display: block;

    position: relative;

    top: 20px !important;

}

td.col4 {

    display: block;

    position: relative;

    top: -20px !important;

    margin-left:180px;

}

td.col5 {

    display: block;

    position: relative;

    top: -45px !important;

    margin-left: 323px;

}

th {

    display: none;

}

.col1:before, .col2:before, .col3:before, .col4:before {

    font-weight: bold;

    display: block;

}

td.col1:before {

    content:"Bestuurs Functie";

}

td.col2:before {

    content:"Datum aanvang";

}

td.col3:before {

    content:"Datum beëindiging";

}

td.col4:before {

    content:"Opmerking";

}

.d {

display:none;

}

th {

    display: none;

}

tr {

display: block;

}

Then do the same with the second configurable list, open the wizard and then go to the CSS tab and paste this Code : 

td.col4 {

    display: block;

    position: relative;

    top: 20px !important;

    margin-left: -1px;

}

td.col5 {

    display: block;

    position: relative;

    top: -20px !important;

    margin-left: 162px;

}

td.col6 {

    display: block;

    position: relative;

    top: -60px !important;

    margin-left: 324px;

}

th {

    display: none;

}

.col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before {

    font-weight: bold;

    display: block;

}

td.col1:before {

    content:"Commissie niveau";

}

td.col2:before {

    content:"Commissie Functie";

}

td.col3:before {

    content:"Commissie naam";

}

td.col4:before {

    content:"Datum aanvang";

}

td.col5:before {

    content:"Datum beëindiging";

}

td.col6:before {

    content:"Opmerking";

}

.d {

display:none;

}

th {

    display: none;

}

tr {

display: block;

}

 

I will explain you how it works, basically you can copy this code and will work with all the Configurable List Widgets, the only thing you have to change would be this code  : 

.col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before {

    font-weight: bold;

    display: block;

}

If you have more than 6 or less than 6, you would have to add the .col class, for example, if we would have one more column , we would use .col7:before in order to set the font to the title, then with this code you set the title :

td.col6:before {

    content:"Opmerking";

}

So, for example, if you would have, as the example above, one more column you would need to add this :

td.col7:before {

    content:"Title";

} 

Now, with this code you configure how the element will be displayed in the form, for example with this code : 

td.col6 {

    display: block;

    position: relative;

    top: -60px !important;

    margin-left: 324px;

}

If you would like to set the last field for example the column 7, you would have to add this code :

td.col7 {

    display: block;

    position: relative;

    top: -60px !important;

    margin-left: 324px;

}

And you only would have to change the top and margin-left properties.

If your widget only has for example 5 fields and you would like to display them in two different rows, the only thing you would have to do , is follow the steps as explained above, but removing the CSS code.

Also, take a look to my cloned form, there you will see the change, you can also clone it : https://form.jotform.com/60126354150949 

Hope this is what you are looking for.

Do let us know if you have any question, we will be glad to assist you.

Regards

Ok thank you very much
I have literally been fighting 2 days with this.
I figured out the dates without the day.
But i cannot grasp the formula for the second row.
Sent from my iPhone
...

Hi,

You're welcome.

With the code provided you can change all the Configurable Widgets in your form.

Feel free to contact us anytime if you need more help.

Regards.