Why fields in the Configurable list are not aligned properly?

  • Profile Image
    bernlochner
    Asked 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?

  • Profile Image
    Nik_C
    Answered 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
    Nik_C
    Answered 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
    bernlochner
    Answered 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
    Kevin_G
    Answered 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
    Kevin_G
    Answered 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: