Why fields in the Configurable list are not aligned properly?

I used a form with a configurable list in two rows for my last form. For most of the users this list worked well but for those working on Mac and using opera as browser it wouldn't work, as the list wouldn't show in two rows. Can I change this somehow?

I checked your form but everywhere I viewed it looked messy:

I manage to re-arrange them in order to show them properly (I assume):

But I'm not sure how you want to have those fields since they are repeating as you can see, how those fields were showing please let us know so we can try to re-arrange them for you?

My apologies, I saw that you added two rows by default in your Configurable list, should the field look like this?

 

I'm working on a CSS that should align the fields properly.

Please let us know.

Thank you!

Hello,

thank you for your mail!

The list should look like this:

Vorname Name Instrument Straße
PLZ Ort Email-Adresse

Vorname Name Instrument Straße
PLZ Ort Email-Adresse

+ add

Thanks for your help!




Von: JotForm [mailto:noreply@jotform.com]
Gesendet: Montag, 24. April 2017 13:30
An: bernlochner@jazzbuero-bw.de
Betreff: Re: Configurable list

A new response has been received:

Answered by Nik_C
My apologies, I saw that you added two rows by default in your Configurable list, should the field look like this?


I'm working on a CSS that should align the fields properly.
Please let us know.
Thank you!
View this thread on browser » Unsubscribe Thread
1493033388
...

You will need to remove the current injected code to your widget and add this one: 

th {

    display: none;

}

 

tr {

    display: block;

height: 95px;

}

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

 

    font-weight: bold;

 

    display: block;

 

}

 

 

.col1:before {

    content:"Vorname*  ";

}

.col2:before {

    content:"Nachname*  ";

}

.col3:before {

    content:"Instrument*  ";

}

.col4:before {

    content:"Straße, Hausnummer*";

}

.col5:before {

    content:"Postleitzahl*";

}

.col6:before {

    content:"Wohnort*  ";

}

.col7:before {

    content:"E-Mail Adresse*";

}

 

 

td.col5 {

    display: block;

    position: relative;

    top: 3px !important;

    margin-left: 0px;

}

 

td.col6 {

    display: block;

    position: relative;

    top: -37px !important;

    margin-left: 125px;

}

 

td.col7 {

    display: block;

    position: relative;

    top: -77px !important;

    margin-left: 250px;

}

You could see the result here: https://form.jotformpro.com/71134472772961 

Feel free to clone my form.

How-to-Clone-an-Existing-Form-from-a-URL

Hope this helps.  

Add this code at the very bottom as well, this will style the delete button as well: 

td.col8 {

    display: block;

    position: relative;

        top: -101px !important;

    margin-left: 379px;

}

Result: