How to prevent the date field from expanding 100 percent width when mobile responsive is enabled

  • e3geo
    Asked on August 22, 2015 at 10:26 PM

    I've been experimenting with JotForm on and off for about 2 years. Sadly, it seems that no matter what I do, what I try, any combination, I can't get the field widths to format elegantly to be able to fit mobile environments using the builder.

    I've tried to make the form "mobile responsive" from the Designer. I have inserted the Mobile Responsive widget. I have used them both at the same time. I have used neither. I test on Dolphin HD, Firefox, and Chrome on a Droid Maxx and a Galaxy SIII both running Kit Kat and fully updated. No matter what I do, the Date Field, for example, formats so that the field for each dd / mm / yy spread the entire width of the page so that it forces them to stack and look like this

    4

    /

    17

    /

    15

    Most of the other input or selection fields spread the entire width of the page as well, such as, drop down menus. It doesn't resemble elegance and looks quite cheesy, quite frankly.

    Additionally, I had set up and very extensive form, set it up to browser cache save, and after it's expiration time, it totally ruined much of the formatting  and all the buttons stopped working completely. All attempts at fresh sessions no longer worked in either Firefox or Chrome mobile.

    Lastly, I have hopelessly tried to use the Mobile Responsive widget but it causes all images to become giant. Links using images use the entire width of the page and look incredibly ridiculous. :( :( :( :( 

    I would really like to be able to subscribe to JotForm, and I actually had subscribed for, if memory serves, about a year period in the past, I really like the ease of the builder but I can't deploy, demonstrate, and offer a product to a client that doesn't work reliably.

     

    Please help. Thank you.

     

    Steve

  • Welvin Support Team Lead
    Replied on August 23, 2015 at 5:10 AM

    Hi Steve,

    Our apologies for the troubles and inconvenience this may have caused you.

    The responsive option in the designer should be enough to all these stuff. But our mobile CSS queries will make all inputs to take the whole width of the mobile device, 100% in the responsive mode.

    http://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive

    I've cloned your form and made the necessary adjustments. Please take a look and let me know if the formatting is what you have desired so I'll let you know the whole steps.

    Here's the form URL: http://www.jotformpro.com/form/52342508962962

    If not, please let us know your preference so we can adjust if for you.

    Thanks

  • e3geo
    Replied on August 24, 2015 at 8:04 PM

    Hi Welvin.

    Thank you for your very rapid response! Yes, that is exactly what I am looking for. Will you provide the method to accomplish this to me please?

     

    Thank you!

  • Ashwin JotForm Support
    Replied on August 25, 2015 at 12:56 AM

    Hello e3geo,

    I am not sure what changes my colleague have made this form. Your message has reached my colleague and he will get back to you as soon as we is available online.

    For now, I would suggest you to clone my colleague's form and start using it. The following guide should help you in form cloning:  https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Thank you!

  • e3geo
    Replied on September 7, 2015 at 4:54 AM

    Hi. Thank you for responses and for addressing the issue and adjusting the form. It works as I wish for it to.

     

    Per your response above: I've cloned your form and made the necessary adjustments. Please take a look and let me know if the formatting is what you have desired so I'll let you know the whole steps.

    I would like to know how to do this myself so that I may apply it to any new form I create as opposed to being limited to starting a new form from the template as you have suggested. Please provide me the steps you mentioned in your initial response. Thank you.

  • Ashwin JotForm Support
    Replied on September 7, 2015 at 6:03 AM

    Hello e3geo,

    Please accept my apology for this delay. I have sent a message to my colleague @Welvin. He will get back to you soon.

    Thank you!

  • e3geo
    Replied on September 7, 2015 at 6:53 AM

    Thank you VERY MUCH!

  • Welvin Support Team Lead
    Replied on September 7, 2015 at 11:49 AM

    I did the following:

    a. Set the mobile responsive in the form Preferences to "NO".

    b. Enabled the mobile responsive option in the designer.

    c. If you have added the mobile responsive widget, please remove that.

    d. Lastly, I have injected the following custom CSS codes to the form:

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

        #month_16, #day_16, #year_16 {

           width : 80% !important;

        }

        #cid_16 > span:nth-child(1), #cid_16 > span:nth-child(2), #cid_16 > span:nth-child(3), #cid_16 > span:nth-child(4) {

            width : 24% !important;

        }

        input#input_6 {

            width : 145px !important;

        }

        input[type=text], input[type=email], input[type=tel], textarea {

            width : 100% !important;

        }

    }

     

    The codes are used to keep the width of the input boxes in the date field the same in mobile devices. Then make the other input fields such as the textbox to use 100% in mobile devices.

    Thanks

  • e3geo
    Replied on September 7, 2015 at 7:42 PM

    Thank you, Welvin, for both your making this work and for showing me how to do this!!

  • Elton Support Team Lead
    Replied on September 7, 2015 at 10:33 PM

    @e3geo

    You're welcome. Should you have any other questions or concerns, feel free to open a new thread.

    Cheers! ;)