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

    Edit Configurable List Dropdown Box Width & Set Input to Two Rows

    Asked by awangkim on January 14, 2017 at 03:25 PM

    Hi Support team,

    I am having trouble adjusting the width of my dropdown box width (Rate Plan & Type) and how do I get the fields in 2 rows because the current setup is not displaying properly in a mobile phone screen. I want the fields to fitted in one screen but the last textbox will always go beyond the screen display.

    Here's the form that I have created: https://www.jotform.com//?formID=70094164575459

    Thanks,

    Tedd

    Page URL:
    https://www.jotform.com//?formID=70094164575459

  • Profile Image
    JotForm Support

    Answered by Mike_G on January 15, 2017 at 05:09 AM

    I was able to see what you mean when I checked your form in mobile screens Please give me some time, I will work on a resolution for your concern and your request to adjust the width of the two drop-down boxes in the Configurable List widget. 

    I will get back to you on this thread as soon as possible.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on January 15, 2017 at 09:03 AM

    You would be able to adjust the width of the two drop-down fields in your form by adding the CSS codes below to the Custom CSS tab of the Configurable list widget.

    td.col2 select, td.col3 select {

        width: 102.19px !important;

    }

    To make the Configurable List widget into 2 rows, please add the codes below.

    #list{

    width: 350px !important;

    }

    #list tr:nth-child(1){

    display: none !important;

    }

    td.col3, td.col4 {

    position: relative !important;

    left: -207px !important;

    top:45px !important;

    padding-bottom: 68px !important;

    z-index: -1 !important;

    }

    th.col3, th.col4 {

    position: relative !important;

    left: -207px !important;

    top:45px !important;

    }

    .add{

    z-index: 1 !important;

    }

    td.col1:before{

    content: "MSISDN" !important;

    font-weight: bold !important;

    color: #55555A !important;

    display: inline-block !important;

    }

    td.col2:before{

    content: "Rate Plan" !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col3:before{

    content: "Type" !important;

    font-weight: bold !important;

    color: #55555A !important;

    display: inline-block !important;

    }

    td.col4:before{

    content: "With Device" !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    As a result:

    I hope this helps, if you have other questions or concerns, please feel free to contact us again anytime. Thank you.