Need 1 or 2 character field added to last row on form that displays correctly on an ipad

  • Profile Image
    capt742000
    Asked on April 03, 2018 at 08:24 AM

    I need to add a 1 or 2 character wide field on the same bottom row of a form that has a Submit  and Print button on it. It must display correctly on an IPad and desktop computer and not have any impact on the Submit or Print buttons, which will be on the same row. The field is intended “for official use only” and can not cause the form to be any longer than it is now so that when it is printed, the Amount field will appear on the first page of the print out.

    The odd thing is my attempt (see my Build) looks close, but my Publish is awfull. The Submit  and Print buttons are affected and I can’t get the new “official use” field to be only 1 or 2 characters long, even using CSS code.

    Can you help?

    i tried to include a screenshot, but this message became too long to send.

    Thanks

    Mike

    PS I just tested my form on a desktop and except for the size of the new field, it displays correctly. So my main problem is when I Publish on an IPad.

  • Profile Image
    Richie_P
    Answered on April 03, 2018 at 11:25 AM

    I'm not sure I understood your question correctly, but I have moved the " for Official use only" below the Print form when viewed on an IPad.

    Here is the custom css code:

    @media(max-width:1290px) and (min-width:766px){
      #id_28{
            margin-top: 70px;
        margin-left: -130px!important;
      }
      .form-all{
        height:980px!important;
      }

    }

    Guide:-How-to-Inject-Custom-CSS-Codes

    Screenshot:

    Please try the custom css code and let us know how it goes.

    Thank you.


  • Profile Image
    capt742000
    Answered on April 03, 2018 at 01:43 PM
    Your code made all of my fields too long.
    I also need the "Number of Children under 6" input field to be the same
    size as the
    the input field for "Number of Children age 6-12 at $5 ea".
    and
    I would like the "Official use" input field to be smaller.
    This view is the "Build" view and "Publish" view on my desktop. On my Ipad,
    it is totally wrong.
    This is what I need. It should look the same on desktop and on an Ipad.
    The image below is what it looks like on my Ipad. The official use field is
    ...
  • Profile Image
    Richie_P
    Answered on April 03, 2018 at 02:36 PM

    I checked the form again and the "Number of children under  6" and "age 6-12" input fields are the same size.

    Your screenshot did not go through, kindly follow this guide -How-to-add-screenshots-images-to-questions-to-the-support-forum

    Thank you.

  • Profile Image
    capt742000
    Answered on April 03, 2018 at 03:43 PM
    Yes but they are not the fields I am referring to.
    The new field "*Number of Children under 6* (*No charge*) is to long. I
    need it to be the same size as the field on its left.
    Also the field names "*official use*" is too long and is overlaying the
    print button on an IPad. (It is ok on a desktop, but when I added your
    suggested code from before, all the fields on the form became too long so I
    had to remove your suggested code.
    Mike
    ...
  • Profile Image
    capt742000
    Answered on April 03, 2018 at 03:43 PM
    I hope I sent to you the correct link.
    This is the one I am referring to:
    https://form.jotform.com/80923886056163
    Mike Enriquez
    ...
  • Profile Image
    Richie_P
    Answered on April 03, 2018 at 04:27 PM

    Thank you for the added information, I have updated the custom css codes.

    #input_29{
      width:50px!important;
    }
    @media(max-width:1290px) and (min-width:766px){
      #id_12{
         margin-bottom: -30px!important;
     
      }
      #text_20{
        margin-top: -20px!important
        ;
      }
     
    #id_21{
      margin-top: -40px!important;
    }
    #id_28{
      margin-left: -150px!important;
        margin-top: 18px!important;
    }

    }

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.