Drop Down Extend Size

  • stonelink
    Asked on August 17, 2015 at 10:12 AM

    Hi,

     

    Can't extend drop down bar size for for 'how did you find us'

    Form: http://form.jotformeu.com/form/52283955015355

  • mert JotForm UI Developer
    Replied on August 17, 2015 at 11:10 AM

    Hi,

    You can extend the bar size of the dropdown with this way :

     

    While your mouse selected the dropdown menu, click the width and then change the number in there. This will extend or shorten the bar depends on your want.

    Drop Down Extend Size Image 1 Screenshot 40

     

    Alternative way to change bar size of the dropdown menu, you can use the Designer for this. To access the designer, Click to "Setup & Embed" then click to "Designer".

    Drop Down Extend Size Image 2 Screenshot 51

     

     

    In "Designer", you need to click "CSS" first, then select the dropdown menu. You will see the ID of that label and feature that you can do to it. In this scenerio, we want to change its width; so click to the width and enter the value you want. The bar of the dropdown will be extend.

    Drop Down Extend Size Image 3 Screenshot 62

  • Charlie
    Replied on August 17, 2015 at 1:30 PM

    Hi,

    Could you try using this custom CSS code:

    .form-label {
        width : 140px !important;
        padding : 0px 1px 4px 0px !important;
    }

    Add it under the CSS area in your Form Designer Tool.

    Drop Down Extend Size Image 1 Screenshot 20

     

    You can adjust the width value with your own preference, here's how the change looks like: http://form.jotformpro.com/form/52284873508968. I cloned your form for testing and demo purposes. You can also clone my form if you want to use that instead.

    Do let us know if you need more help on this.

  • Charlie
    Replied on August 18, 2015 at 9:12 AM

    Yes, the "!important" is used to give priority to the design or style applied or to override the existing one. But it's better to check that there's no other CSS styling that points to the same element to avoid conflict. You can check this article link to learn more about it.

    I hope that helps. Do let us know if you need more help on this.