How to adjust size of Drop Down fields

  • max123jot
    Asked on September 3, 2016 at 9:17 AM

    dear jot form

    i am struggling to get the input drop down fields to be the same size

    i have tried all the buttons i know

    please advise

    m

  • Boris
    Replied on September 3, 2016 at 10:01 AM

    Are you referring to the width of your Drop down fields, as depicted below?

    How to adjust size of Drop Down fields Image 1 Screenshot 40

    You can control the width of these fields by clicking on their gear-shaped icons in the Form Builder, and switching to the Options tab. Your first Drop Down field is currently set to width of 100 pixels, while the second one is set to 200 pixels. Simply make sure to set them both to the same value, and they should appear in the same size:

    How to adjust size of Drop Down fields Image 2 Screenshot 51

    How to adjust size of Drop Down fields Image 3 Screenshot 62

    If you need any further assistance, please let us know.

  • max123jot
    Replied on September 3, 2016 at 2:45 PM
    ok
    tried it
    worked for drop down boxes (pixels)
    but seems to work differently for text or email (characters)
    how to get the all the same width please
    m
    ...
  • Kevin Support Team Lead
    Replied on September 3, 2016 at 5:54 PM

    Additionally to the suggestion given above by Boris, you may also may also inject this CSS code: 

    .form-textbox, .form-dropdown{

        width: 400px;

    }

    It will force the text boxes and drop downs to have a width of 400px, this guide will help you to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • max123jot
    Replied on September 3, 2016 at 6:45 PM
    ok
    https://www.jotform.com//?formID=62435412139148
    please advise how i get the text boxes to be same also
    drop down is px
    text field is character
    m
    ...
  • Kevin Support Team Lead
    Replied on September 3, 2016 at 8:46 PM

    You need to inject the code I gave you above, it is already set with px: 

    .form-textbox, .form-dropdown{

        width: 400px;

    }

    Guide: How-to-Inject-Custom-CSS-Codes 

    Here is my cloned form of yours where you can see how the code works:

    https://form.jotform.com/62467044723961

     

     

  • max123jot
    Replied on September 4, 2016 at 9:46 AM
    i dont think this should be as hard as i am finding ths
    so i am probably doing something wrong
    i did get (somehow) the first field text to be a larger font
    Fellow/Resident Trainee e-mail
    i get these fields correct in designer, but does not look the same in
    builder
    also i wanted pgy field to be to the right of Fellow/Resident Trainee name
    please advise
    right now it seems what i am doing is a crap shoot
    but i hope you can help figure out how to make this consistent
    m
    ...
  • Welvin Support Team Lead
    Replied on September 4, 2016 at 12:06 PM

    I can't seem to find the culprit, but changing the width in the designer should do it. I did it in the cloned version of your form and it's not changing no matter what. I ended up injecting the following custom CSS codes:

    .form-textbox, .form-dropdown {

        width: 350px !important;

        box-sizing: border-box !important;

        height: 25px !important;

    }

    The font can be adjusted in the mini designer/full designer. 

    Let us know if you need any further assistance.

  • max123jot
    Replied on September 4, 2016 at 5:45 PM
    the field
    Fellow/Resident Trainee
    looks right in designer and in designer preview, but not in the real form
    also hoping to get
    Fellow/Resident Trainee and next field pgy on the same line and close to
    each other
    welvin
    you have helped me alot in the past
    thanks
    m
    ...
  • David JotForm Support Manager
    Replied on September 4, 2016 at 7:36 PM

    Please check your form again: https://form.jotform.com/62435412139148

    All fields have the same size now:

    How to adjust size of Drop Down fields Image 1 Screenshot 20

    Let us know if you need more help.

  • max123jot
    Replied on September 5, 2016 at 7:45 AM
    yes
    great
    now, is it possible with jotform to make the font sizes of input choices
    the same as the field "your name"
    please advise
    thanks
    m
    ...
  • Chriistian Jotform Support
    Replied on September 5, 2016 at 9:05 AM

    Hi,

    Do you mean you want the font of options/choices of your dropdown fields to have the same font as the textbox of "Your Name" field? They seem to have the same font family. We just have to change the font size so please change the injected CSS above to:

    .form-textbox, .form-dropdown {

        width: 350px !important;

        box-sizing: border-box !important;

        height: 25px !important;

        font-size: 20px;

    }

     

    Please take note of the highlighted change.

    How to adjust size of Drop Down fields Image 1 Screenshot 20

    Do let us know if you need further assistance.

  • max123jot
    Replied on September 5, 2016 at 1:46 PM
    awsome!
    m
    ...