Form not showing up the same on MAC and PC

  • Profile Image
    visionarymonkey
    Asked on October 04, 2013 at 11:42 AM

    My form is not showing up the same on the MAC and PC.  I am viewing the page and form on Chrome on both the PC and MAC.  I have also tested firefox, safari and IE with the same results.

  • Profile Image
    jedcadorna
    Answered on October 04, 2013 at 12:51 PM

    Hi,

    Please confirm if you are still having difficulty viewing your form? Your website works fine on my end and I can see the form.

     

    Let us know if you still need help on this.

    Thanks,

  • Profile Image
    visionarymonkey
    Answered on October 04, 2013 at 12:55 PM

    jedcadorna

    As you can see in the screenshot that you provided the form does not look that same as the screenshot that I provided as reference.  The top portion of the form in your screenshot has two verical rows of three, where my screenshot has two horizontal rows of three.  The additional information section oo your screenshot expands past the above grey bar and in my screenshot it does not.

  • Profile Image
    Mike_T
    Answered on October 04, 2013 at 02:36 PM

    It looks like that you use shrunken fields on the form, and form adapts based on these shrunken fields. The size of the text box is not the same on MAC and PC, so that the form looks different.

    I have found the following thread on stackoverflow:

    Input fields rendered very differently in different browsers

    " The size attribute sets the number of characters that the field will display (in the case of text and password fields). Different browsers use different default fonts, font sizes, and ppi measures, meaning that you get massively different sized (in pixels) fields. "

    As a workaround, you can try to set the exact width for your form text boxes by injecting the following CSS to your form:

    .form-textbox {width: 200px;}

    Thank you.

  • Profile Image
    visionarymonkey
    Answered on October 04, 2013 at 04:01 PM

    Thanks... adding .form-textbox {width: 200px;} and .form-textarea {width: 200px;} fixed the issue.

    Thanks for your help.

     

  • Profile Image
    Mike_T
    Answered on October 04, 2013 at 05:01 PM

    You are quite welcome. Thank you for using our service.