-
bernlochnerAsked on April 24, 2017 at 6:25 AM
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?
-
Nik_CReplied on April 24, 2017 at 7:08 AM
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?
-
Nik_CReplied on April 24, 2017 at 7:29 AM
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!
-
bernlochnerReplied on April 24, 2017 at 8:43 AMHello,
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
... -
Kevin Support Team LeadReplied on April 24, 2017 at 10:25 AM
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.
-
Kevin Support Team LeadReplied on April 24, 2017 at 10:31 AM
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: