What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Forms look different on PC to the look on IOS

    Asked by ipbr21054 on March 30, 2016 at 06:14 AM

    Hi.

    Ive been trying to figure out how to sort out the look of the form for when viewing on ios etc.

    The form looks correct no problems on the pc but ios devices have issues.

    Its not a major issue but would be nice if these finishing touches are completed.

     

    This form http://form.jotformeu.com/form/60705884010349

    Pc is correct.

    Ipad is correct Landscape & Portrait.

    Iphone has problem as advised below both Landscape & Portrait.

     

    The message box border needs to be the same width as the text box fields above in this form.

    The message box text area needs to completly fill the message box border area.

    .....

    This form http://form.jotformeu.com/form/60854960060354

    Pc is correct.

    Ipad is correct Landscape & Portrait.

    Iphone has problem as advised below Portrait only "as Landscape not applicable"

     

    The message box border needs to be the same width as the text box fileds above in this form.

    The message box text area needs to fill the box border

    .....

    This form http://form.jotformeu.com/form/60712393428355

    Pc is correct.

    Ipad & Iphone have problem as advised below.

    The message box border has the correct width as the text box fields in this form but the message box text area does not completely fill the message box border area.

    Please look at photos supplied to help you with the viewing problems.

     

    Many thanks for your continued support once again.

    Have a nice day

     

    form view form design
  • Profile Image
    JotForm Support

    Answered by Welvin on March 30, 2016 at 08:34 AM

    I'm checking this now and will let you know later for the adjustments in the CSS codes of the form.

  • Profile Image

    Answered by ipbr21054 on March 30, 2016 at 08:36 AM

    Many thanks,i await the reply.

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on March 30, 2016 at 08:49 AM

    I've fixed it for you by adding the following custom CSS codes to the forms:

    @media only screen and (max-device-width: 550px) {

    .form-textarea {

    width: 100% !important;

    }

    }

    You can find the codes in the designer (https://www.jotform.com/form-designer/).

    Please check and let us know if there are still issues.

  • Profile Image

    Answered by ipbr21054 on March 30, 2016 at 09:06 AM

    Hi,

    Many thanks for that.

    Ive checked the forms and spot on.

    But this form 60712393428355 text are is now the correct width but the height is still short.

    Ive added to the css height:100%!important; but not made much difference

     

    I am trying to learn media querie but finding it hard.

  • Profile Image

    Answered by ipbr21054 on March 30, 2016 at 10:04 AM

    Hi,

    Just looking at the code when i remove the code below the message box is spot on.

    Having said that this then makes the part number drop down field go left as opposed to center.

     

    .form-input-wide.jf-required {
        margin : auto;
        border : 3px solid #000000!important;
        border-radius : 10px !important;
    }

    .form-textbox {
        border : 2px solid #000000!important;
    }

    .form-dropdown {
        border : 2px solid #000000!important;
    }

    .form-textarea {
        border : 2px solid #000000!important;
    }

    .form-input-wide.jf-required {
        margin : auto;
    }

  • Profile Image

    Answered by ipbr21054 on March 30, 2016 at 10:11 AM

    This is the problem code

    .form-input-wide.jf-required {

     

    If i change it to .form-input { all is ok.

     

    So please advise what the difference is.

  • Profile Image
    JotForm Support

    Answered by Welvin on March 30, 2016 at 11:50 AM

    .form-input is the correct one. The difference is that the jf-required means that you are only targeting the required field and not the normal view of the field. You should use the correct one to fix it. If something's wrong again, let us know so we can check it further.

  • Profile Image

    Answered by ipbr21054 on March 30, 2016 at 11:52 AM

    All ok now thanks