How to have consistency of form alignment?

Hello,

I try to make the feilds length consistant, but I found out that textbox and dropdown never get allighned and the view changes from one computer to another.

can you please help?

example : https://form.jotform.me/72475687697479

You could insert the below CSS in your Custom CSS Field:

.form-textbox, .form-dropdown {

    width: 600px!important;

}

That should make the length of the fields the same. I checked in few browsers and it worked fine.

Please try and let us know how it worked.

Thank you!

Thank you Nik, I tried it the texbox and dropdown are now alligned , but the table got messed up. 

is there a code to align the table as well? 

https://form.jotform.me/72475687697479 

Actually, please remove the CSS I provided above from the Custom CSS field that you just added. Since that is causing the table to increase.

I removed and I didn't notice any text-field or drop-down field that is off in width. You can check my test form https://form.jotformpro.com/72724597551970

If you notice anything different please let us know so we can check again.

Thank you!

It still looks weird when I embed the form in my website http://www.boksha.com/AKupload

however, when I applied the CSS code you gave, everything looked perfect except for the table.

I'm sorry but I'm unable to check the page since it requires the login:

Could you please share the credentials so we can check further? 

I'll mark the thread as private so it is only viewable to our Support and you.

Thank you!

username:boksha

password: 

bok!32!

Thank you

I checked the page in Chrome, Firefox and Safari, and I see what you're referring to. The text-box width is increased when viewed in FireFox and Safari.

Please try re-embedding the form by using the below iFrame code:

<iframe id="JotFormIFrame-72475687697479" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/72475687697479" frameborder="0" style="width: 1px; min-width: 100%; height:2721px; border:none;" scrolling="no"> </iframe>

I'll also, just in case work on CSS that should fix that issue.

We'll wait for your response.

Thank you!

Additionally, if that doesn't work, please paste the below CSS instead the CSS I provided before:

#input_4, #input_12, #input_14, #input_30, #input_26, #input_11,#input_7,#input_22,#input_33,#input_15,#input_16,#input_27,#input_17,#input_18,#input_25,#input_31,#input_32{

    width: 600px!important;

}

That will make all text-box and drop-down fields the same width.

Let us know how it worked.

Thank you!

Thank you mate, will share it with the developers to implement it. 

Appreciate it 

Not a problem, if you have any further questions or concerns please let us know.

Thank you!

Hello again, 

Tried both, unfortunately still form is not aligned neither on safari or google chrome. 

I'm sorry to hear that.

But I think I found the solution. I inserted a custom CSS code to your form and that apparently worked.

I tested in Chrome, Safari, and FireFox. The width was preserved.

Please check and let us know how it worked for you.

Thank you!

Yes it has worked ! Thank you so much !