Drop Down Extend Size

  • Profile Image
    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

  • Profile Image
    mert
    Answered 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.

     

    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".

     

     

    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.

  • Profile Image
    SLINT
    Answered on August 17, 2015 at 11:26 AM

    HI,

    I've tried both ways, and it doesn't seem to work at all - really frustrating! 

    Please advise.

    Sim.

  • Profile Image
    SLINT
    Answered on August 17, 2015 at 11:45 AM

    Hi,

    I've just expanded the drop down.

    However now the 'How Did You Find Us?' doesn't fit on one line.

    Is there a way I can create some space so all are equal?

    Please advise -

    Sim.

     

  • Profile Image
    Charlie
    Answered on August 17, 2015 at 01: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.

     

    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.

  • Profile Image
    SLINT
    Answered on August 18, 2015 at 07:57 AM

    Thanks for the help!

    Just so I know in future - to make the whatever the px is, you should put !important after it, so it does stay as that px?

  • Profile Image
    Charlie
    Answered on August 18, 2015 at 09: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.