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

    Configurable List Widget Split into two rows (or lines below each other)

    Asked by norm27 on February 19, 2016 at 04:47 AM

    Hi guys,

    I need your help with this.

    I have a configurable list widget set up, but the two columns side by side are too wide for any smaller mobile devices.

    I understand that the widget uses tables etc to achieve the seamless duplication.

     

    My Question:

    Please send me the Custom CSS to inject to make them appear one below the other.

    Ie. the 'Make and Model' to appear first on it's own line, then below that, the IMEI.

    -----------

    We only have these two columns, we are struggling to set it up to force a 'next row'.

    Here is a link to OUR form: https://www.jotform.com//?formID=60491684710962

    (I have also attached a screenshot of the layout that we are trying to achieve)

     

    There is a solution thread/form example from another user here: http://form.jotformpro.com/form/51739341809966?

    Here is another similar thread for reference: http://www.jotform.com/answers/442223-Configurable-list-all-on-one-line-problem

    But we cannot adapt that to our scenario (just thought I'd include it for reference) Click on the 'next' button, and take a look at the 'Previous Employment' field - it uses the configurable list widget.

     

    Please help out if possible, we have searched the forums and various solutions come up, but none that only have two columns like ours (that need to be one below the other)

     

    Thanks in advance, I need to find a solution urgently.

    Kind Regards

    Screenshot
    rows configurable list list widget OR split rows configura two lines list widge multiple rows
  • Profile Image
    JotForm Support

    Answered by beril on February 19, 2016 at 10:44 AM

    Can you add the CSS code below?

     

    tr:nth-child(2) > td.col1 > span:before {

    content: "Make & Model";

    }

     

    tr:nth-child(3) > td.col1 > span:before {

    content: "MEI Number (or serial number if no IMEI)";

    }

    I hope it will work.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by norm27 on February 19, 2016 at 10:59 AM

    Hi thanks for your response.

    That doesn't seem to have any effect whatsoever?

    Kind Regards,

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 19, 2016 at 12:26 PM

    Replace the code that you added with this one:

    td.col2 {

        display: block;

        position: relative;

        top: 20px !important;

        margin-left: -1px;

    }

     

    th {

        display: none;

    }

    .col1:before, .col2:before {

        font-weight: bold;

        display: block;

    }

    td.col1:before {

        content:"Make & Model";

    }

    td.col2:before {

        content:"MEI Number (or serial number if no IMEI)";

    }

    .d {

    display:none;

    }

    th {

        display: none;

    }

    tr {

    display: block;

    }

    Do note that this will only work with the widget in the form that you shared us, if you want to use this code in other forms then you need to customize it a little bit.

    Take a look to my cloned form of yours: https://form.jotform.com/60495049711962

    Feel free to clone it.

    Hope this helps.