Input Field Width is too Small for Date & Adobe Sign Widget

  • Profile Image
    Sikorski
    Asked on August 24, 2020 at 10:46 AM

    Building my first form, and I am having a consistent issue with the field width of the date and the Adobe Sign widget email line in my custom 'fill in the blank' form.  

    https://form.jotform.com/202314030418035

    On mobile & tablet portrait, they're perfect.  On mobile landscape, tablet landscape, and desktop, while you can click into them, both are too narrow to see the inputs. 

    While I will be iFrame embedding this into a site, I'm seeing this issue in the preview window in Jotform as well as the test site.  

    TIA for any assistance!

  • Profile Image
    Kenneth_C
    Answered on August 24, 2020 at 12:28 PM

    Thank you for reaching support,

    Can you please reset the theme by temporarily enabling a different them and placing it back to the Default theme?

    Here is a screencast:

    1598286451The Easiest Online Form Builde

    I hope that helps.

    Best.

  • Profile Image
    Sikorski
    Answered on August 24, 2020 at 12:47 PM

    Hello!  That worked for the Adobe Sign Widget, but the date field is still having the width issue.  

  • Profile Image
    Kenneth_C
    Answered on August 24, 2020 at 02:03 PM

    Hi there,

    I have made customizations on the form and here is how it looks:

    1598292114e1.png

    If that is acceptable, kindly insert these codes into your Inject Custom CSS Areahttps://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    span#id_1598278992322-date {

        width: 12% !important;

    }

    input#lite_mode_1598278992322-date {

        width: 80% !important;

    }

    I hope that helps.

    Best.

  • Profile Image
    Sikorski
    Answered on August 24, 2020 at 03:22 PM

    Kenneth, thank you!  I added the code, but it appears to have transferred the problem from the mobile and tablet landscape and the desktop views to both mobile views and the tablet portrait views.  (Exactly the opposite of the first bug.)

    Should I be using a different text and date element, or have I created the form in such a way as to prevent the fields from performing the same in all views?

  • Profile Image
    Kenneth_C
    Answered on August 24, 2020 at 04:45 PM

    Hi there,

    After editing it here is how it looks on mobile:

    1598301821e1.png

    And here it is on a tablet:

    1598301844x1.png

    If that is okay with you, kindly place these codes below the ones I gave you earlier:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

       

       span#id_1598278992322-date {

        width: 38% !important;

      }

    }

    @media only screen 

      and (min-device-width: 768px) 

      and (max-device-width: 1024px) 

      and (-webkit-min-device-pixel-ratio: 1) {

    span#id_1598278992322-date {

        width: 14% !important;

      }

    }

    I hope that helps.

    Best.

  • Profile Image
    Sikorski
    Answered on August 25, 2020 at 12:57 PM

    Kenneth, that works for me!  Thank you SO MUCH for your assistance!