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

    How to make drop down menu smaller?

    Asked by buymorefans on October 19, 2016 at 01:43 AM

    **Please do not edit this for live***

     

    Hi,

     

    I was wondering how to make the drop down menus for these products less wide?

    At the moment the drop down arrows are also cut off on the page.

    https://www.jotform.com//?formID=42711559318962

     

    https://buymorefans.com/2-for-1-sale-order-page

     

    Thanks.

    **Please do not edit this for live***

    Page URL:
    https://buymorefans.com/2-for-1-sale-order-page

    Make how drop JotForm wide www thanks
  • Profile Image
    JotForm Support

    Answered by candy on October 19, 2016 at 01:53 AM

    Hello,

    I've cloned your form and tried on my side.

    You can inject following CSS codes into your form:

    .form-dropdown {

        width : 200px !important;

    }

    If you need further assistance, do not hesitate to contact us. We will glad to help you.

    Thanks.

  • Profile Image

    Answered by buymorefans on October 19, 2016 at 10:37 PM

    Hi,

    When I inject that code it creates a new problem of the credit card fields not being aligned. The expiry month and year is under each other when they are suppose to be side by side.

    How can I make the drop down menus smaller with this problem?

    **Please do not edit this for live***

    Thanks

     

  • Profile Image
    JotForm Support

    Answered by candy on October 20, 2016 at 02:08 AM

    Hello again,

    I am sorry for the inconvenience you had.

    I've tried again and I've managed to fix your problem. Please inject these CSS codes below in order to make drop box smaller without affecting the other drop-down lists:

    .form-sub-label-container{

    width : 300px;

    }

    #input_15_quantity_1012_0{

    width : 200px;

    }

    #input_15_quantity_1015_0{

    width : 200px;

    }

    #input_15_quantity_1014_0{

    width : 200px;

    }

    Please do not forget to remove the other CSS codes, the ones I had told you to inject before.

    If you need further assistance, please do not hesitate to contact again.

    Thanks in advance.

  • Profile Image

    Answered by buymorefans on October 20, 2016 at 08:51 PM

    Hi Candy,

     

    The new CSS did not work for me. Not only are the expiry month and year under each other. The last name field is very far to the right and the security code field is under the card number.

    I'm sure you've shopped online before and this is not how a credit card field should look even in your example.

    *Please do not edit this for live***

     

    Could you please try and make it look like this form:

    *Please do not edit this for live***

     

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by owen on October 21, 2016 at 02:33 AM

    Hi,

    The reason that these CSS codes are not working are because the other dropdowns on credit card field are also affected by the codes you injected. 

    Here is what you should inject to avoid this:

    .form-dropdown.cc_exp_month {

        width : 150px !important;

    }

     

    .form-dropdown.cc_exp_year {

        width : 150px !important;

    }

     

    .form-dropdown {

        width : 300px;

    }

    The first two rows that I highlighted with green are there to make sure that the dropdowns on credit card field are not affected by the later one that I highlighted with pink. 

    Please try this and see if it is working. If you still find the ones near Instagram, Facebook and Twitter too wide, you can decrease the value 300px and see what fits best. 

    Another suggestion of mine is to add Mobile Responsive Widget to your form. When the customers browse your form through mobile devices they will not be affected by the changes of mobile display when you use this widget:

    https://widgets.jotform.com/widget/mobile_responsive

    Please contact us again if you need any further assistance. 

  • Profile Image
    JotForm Support

    Answered by candy on October 21, 2016 at 02:44 AM

    Hello again,

    Besides my colleague Owen, I've tried again and I think I've managed to fix your problem this time. Please inject these CSS codes below in order to make drop box smaller without affecting the other drop-down lists:

    #input_15_quantity_1015_0{

    width:200px !important;

    }

    #input_15_quantity_1014_0{

    width:200px !important;

    }

    #input_15_quantity_1012_0{

    width:200px !important;

    }

    .form-product-item .form-sub-label-container {

        margin : -25px 9px 0px 62px;

    }

     

    I've deleted the other CSS codes injected before and included only those codes into the form. This codes above does not effect the drop down lists of payment fields.

    I hope your issue is fixed as you can see the screenshot below:

    Thank you for your patience.

  • Profile Image

    Answered by buymorefans on October 25, 2016 at 11:25 PM

    Hi,

     

    I have used the solution provided by Owen and it has fixed the drop down width. However I found another problem when checking the form on mobile.

    The credit card fields are all miss aligned and does not look they same as on desktop.

    **Please do not edit this for live***

    How can I get the credit card number and security code fields side by side?

    How to get the expiry month and year side by side without affecting the desktop view?

     

    **Please do not edit this for live***

     

    Thanks!

     

  • Profile Image
    JotForm Support

    Answered by candy on October 26, 2016 at 02:53 AM

    Hello again,

    I've cloned your form on my side and I've injected the following CSS codes in Designer:

    .form-dropdown.cc_exp_month {

        width : 150px !important;

    }

    .form-dropdown.cc_exp_year {

        width : 150px !important;

    }

    .form-dropdown {

        width : 300px;

    }

    .form-sub-label-container{

    display: table-cell !important;

    width : 300px;

    }

    .form-sub-label-container{

    margin-right: 0px !important;

    }

    .form-address-table{

    font-size:12px;

    }

    I've checked on my Android mobile phone and I've seen the following screenshot:

    I hope this helps. Thanks.

     

  • Profile Image

    Answered by buymorefans on October 26, 2016 at 10:10 PM

    Hi Candy,

    Thank you for your answer. While your CSS did fix most of the problems. It also placed the drop down menus under the image making the form very long.

    Also the dash that is suppose to be between the expiry month and year is under the drop down when I checked on ipad.

    Is there are way to fix this?

    Thanks,

    **Please do not edit this for live***

  • Profile Image
    JotForm Support

    Answered by owen on October 27, 2016 at 01:55 AM

    Hi,

    Seemingly we need to shorten the width of dropdown menus here. Please try editing your existing CSS code like this:

    .form-dropdown {

        width : 250px;

    }

     

    .form-dropdown.cc_exp_month {

        width : 125px !important;

    }

     

    .form-dropdown.cc_exp_year {

        width : 125px !important;

    }

     

    All you should do is to edit the numbers that I highlighted with pink. Please try these and see if they fit well.

    Here is the screenshot of your form on an iPad:

    I also checked it on some other mobile platforms and there does not seem to be an issue with it. 

    Let us know if you need any further assistance.