Forms look different on PC to the look on IOS

  • Profile Image
    ipbr21054
    Asked 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

     

  • Profile Image
    Welvin
    Answered 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
    ipbr21054
    Answered on March 30, 2016 at 08:36 AM

    Many thanks,i await the reply.

     

     

  • Profile Image
    Welvin
    Answered 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
    ipbr21054
    Answered 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
    ipbr21054
    Answered 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
    ipbr21054
    Answered 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
    Welvin
    Answered 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
    ipbr21054
    Answered on March 30, 2016 at 11:52 AM

    All ok now thanks