How to have consistency of form alignment?

  • Profile Image
    boksha
    Asked on September 28, 2017 at 01:37 AM

    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

  • Profile Image
    Nik_C
    Answered on September 28, 2017 at 02:54 AM

    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!


  • Profile Image
    boksha
    Answered on September 30, 2017 at 11:51 AM

    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 

  • Profile Image
    Nik_C
    Answered on September 30, 2017 at 12:45 PM

    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!

  • Profile Image
    boksha
    Answered on September 30, 2017 at 12:53 PM

    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.


  • Profile Image
    Nik_C
    Answered on September 30, 2017 at 12:56 PM

    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!

  • Profile Image
    boksha
    Answered on September 30, 2017 at 01:09 PM

    username:boksha

    password: 

    bok!32!


    Thank you

  • Profile Image
    Nik_C
    Answered on September 30, 2017 at 01:25 PM

    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" onload="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!

  • Profile Image
    Nik_C
    Answered on September 30, 2017 at 01:34 PM

    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!

  • Profile Image
    boksha
    Answered on September 30, 2017 at 02:35 PM

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


    Appreciate it 

  • Profile Image
    Nik_C
    Answered on September 30, 2017 at 02:51 PM

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

    Thank you!

  • Profile Image
    boksha
    Answered on October 02, 2017 at 01:31 PM

    Hello again, 


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

  • Profile Image
    Nik_C
    Answered on October 02, 2017 at 02:02 PM

    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!

  • Profile Image
    boksha
    Answered on October 03, 2017 at 12:49 PM

    Yes it has worked ! Thank you so much !