How to control width of dropdown fields

  • Profile Image
    yy1353
    Asked on June 17, 2021 at 01:04 AM

    Dear support staff,

    What I want to do is to control dropdown fields width.

    I've attached a screen shot.

    The above image shows 6 fields(consist of dropdown and number fields) in 1 line.

    To do this, I just set width of each field's option in property menu.

    And I tried to do same operation to put 6 dropdown fields in 1 line.

    But I can not control the width of first field(orange star mark). 

    Only this field have longer text, then I tried to expand the width. But it seems that the specification doesn't work. 

    How do I expand the length? 


  • Profile Image
    Sam_G
    Answered on June 17, 2021 at 08:21 AM

    Hello Yy1353,

    You may use CSS code to adjust the width of the dropdown fields.

    You can get the field IDs by going to dropdown settings > advanced > Field IDs.

    1623932432_60cb3e103ebe8_

    #input_34{

      width: 135px!important;

    }

    Related guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this helps.

    Let us know if you need further assistance.

  • Profile Image
    yy1353
    Answered on June 17, 2021 at 08:38 PM

    Dear Sam san, thank you for your quick reply.

    But unfortunately, I’m still struggling with this problem.

    I’ve attached the material, please look at each field’s ID.

    According to your comment, I specified the value for input_115, and the width of the field looked expanded.

    But even if I specified more than 600px, the width of input_115 was not changed.

    And about input_117, although I specified “move to new line” in the detail setting of the property panel, it is displayed on same line with input_115.   

    How do I solve this problem?

    1623976707_60cbeb03380ea_Jotform_q202106

  • Profile Image
    Sam_G
    Answered on June 18, 2021 at 05:12 AM

    Hello Yy1353,

    Kindly add this CSS code:
    #input_118, {

    width: 100px !important;

    }

    #input_119

    {

    font-size: 12px

    width: 100px !important;

    }

    #input_120

    {

    font-size: 12px

    width: 100px !important;

    }

    #input_121 

    {

    font-size: 12px

    width: 100px !important;

    }

    It looks like this:

    1624007514_60cc635a3f063_

    You may adjust the width depending on your preference.

    Related guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Here's my cloned form : https://form.jotform.com/211682393618966

    I hope this helps.

    Let us know if you need furhter assistance.