The Phone Number field is cutoff when viewed from mobile

  • Profile Image
    HarmonieLint
    Asked on December 14, 2017 at 02:29 AM

    I try to program a field for mobile phone in the form. In all types of screens it is doing well except horizontal screen for the mobile phone. The field is cut off to about the half (see print screen)

    Could you solve this?

    Best regards,

  • Profile Image
    Jim_R
    Answered on December 14, 2017 at 05:31 AM

    I tried this on my own Android phone (with Chrome) but failed to reproduce the issue shown on your screenshot. Here's how it looked like from my perspective:

    Is your issue resolved? If not, can you please get back to us with the following so we can attempt to reproduce this:

    🔘 Make and model of the phone you're using to test this

    🔘 Android version you're running

    🔘 And the browser you're using

  • Profile Image
    HarmonieLint
    Answered on December 14, 2017 at 06:47 AM

    Wel very strange because I used your own jotform example and clic on the left one (vert cellphone exemple) and I still have  the same image. So please explain me. On mine celphone it gives the same result, so for me the problem is not solved. When I use the horizontal celphone example the fill in plane is complete. 

    Horizontal exemple:GSM nr fill-in

    1513251860Schermafbeelding 2017-12-14 omVertical exemple: GSM nr fill-in

    1513251946Schermafbeelding 2017-12-14 om

    Those images are taken from your own website!!!

    Best rdgs,

  • Profile Image
    agonhasani
    Answered on December 14, 2017 at 07:15 AM

    Hi HarmonieLint,

    The problem is caused by CSS. The width of the span element is 31%.

    To solve this please inject some Custom CSS Code to your form.

    CSS to copy and paste to your form:



    @media screen and (max-width: 480px),screen and (max-device-width: 767px) and (orientation: portrait),screen and (max-device-width: 415px) and (orientation: landscape) { [data-type=control_phone] .form-sub-label-container:first-child { width: 100%; margin-right: 4%; }}




    If you don't know how to inject Custom CSS, please take a look at the guide below

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

     

    Please let me know if you have any problems.

  • Profile Image
    HarmonieLint
    Answered on December 14, 2017 at 07:55 AM

    Happy to hear that there was a missing CSS code. I injected it on the correspondent field and wonderfull it is working!

    Strange that all the others number fields didn't had to receive this CSS injection.

    Nicely solved

    Best rdgs