What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Why fields in the Configurable list are not aligned properly?

    Asked by bernlochner on April 24, 2017 at 06: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?

    Page URL:
    https://form.jotformeu.com/71132523068348

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Nik_C on April 24, 2017 at 07: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?

  • Profile Image
    JotForm Support

    Answered by Nik_C on April 24, 2017 at 07: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!

  • Profile Image

    Answered by bernlochner on April 24, 2017 at 08:43 AM
    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
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G 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.  

  • Profile Image
    JotForm Support

    Answered by Kevin_G 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: