-
max123jotAsked 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
-
BorisReplied on September 3, 2016 at 10:01 AM
Are you referring to the width of your Drop down fields, as depicted below?
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:
If you need any further assistance, please let us know.
-
max123jotReplied on September 3, 2016 at 2:45 PMok
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 LeadReplied 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.
-
max123jotReplied on September 3, 2016 at 6:45 PMok
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 LeadReplied 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
-
max123jotReplied on September 4, 2016 at 9:46 AMi 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 LeadReplied 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.
-
max123jotReplied on September 4, 2016 at 5:45 PMthe 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 ManagerReplied 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:
Let us know if you need more help.
-
max123jotReplied on September 5, 2016 at 7:45 AMyes
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 SupportReplied 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.
Do let us know if you need further assistance.
-
max123jotReplied on September 5, 2016 at 1:46 PMawsome!
m
...