Mobile Formatting of Certain Fields

  • e3geo
    Asked on September 19, 2015 at 9:25 AM

    Hi.

    JotForm support has already helped me solve an issue with formatting the date field for mobile devices.

    I believe that I understand that responsive forms use custom CSS while until a form is made responsive in the designer, no custom CSS exists.

    I have created a sample of what occurs when I add a time field that employs Time Range and then I change the form to be become responsive. The same thing happens with a date field. The individual drop downs no longer display horizontal relative to each other but instead stack vertically.

    (I'm not a professional developer though I have taught myself AS2 and VBA so I at least understand scriptiing - my HTML and CSS experience is quite limited so I'm adding the following...I have noticed that while in the designer, with a single field such as in the sample i"m providing, that once responsive is selected, the field is moved to the middle of the form instead of remaining aligned left. This appears to me to possibly be what causes there to no longer be enough room for the field to spread horizontally. I'm merely stating this to see if I can help you to help me to understand how the CSS for mobile actually works.)

    JF support provided me with a CSS mod for another form which can be found here: https://www.jotform.com//?formID=52492815603153.

    I see after the INSPECT_SEPERATOR that the CSS is injected and I believe that I understand that the CSS controls the width of the individual drop menus and the span of the entire field as well.

    Will you please show me where and what to add to provide the same performance for a time field that uses TIME RANGE, that being Hour Minutes Until Hours Minutes as in the sample found here: http://form.jotform.us/form/52613504608148? If you can please take a bit of time to instruct me, I will be VERY grateful!!

    (I can work around this by using two time fields and then concatenating them together into a hidden field that displays it's value only in the notification email, but that's not very elegant or efficient.)

    I have attached 2 screenshots.

     

    Thank you!!!!

    Jotform Thread 665865 Screenshot
  • e3geo
    Replied on September 19, 2015 at 10:55 AM

    I forgot to add to the previous...

    Can you show me how to add and combine the CSS with the CSS of the first form example that JF had already fixed for me, i.e. fix the Date field width AND the Time with range field width both in the same form?

     

    Thank you!

  • Welvin Support Team Lead
    Replied on September 20, 2015 at 11:27 AM

    You can inject the following custom CSS codes to fix the time range alignment:

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

    [data-type="control_time"] .form-sub-label-container {

        width: initial;

    }

    The code is a mobile CSS query for the Time Field. You can inject the codes in the form preferences (this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes) or through CSS tab in the designer:

    Mobile Formatting of Certain Fields Image 1 Screenshot 20

     

    As for the other CSS codes in the other form you have, the field ID's are always not the same. If you have a datetime field that is not looking good in mobile devices, please let us know the form link so we can compile the codes again and give it to you.

    But we have this guide in getting the field ID/Names: https://www.jotform.com/help/146-How-to-find-Field-IDs-Names.

    Thanks

  • e3geo
    Replied on September 20, 2015 at 1:31 PM

    :( :( :(

    I'm very sorry Welvin.

    I am building from the original form template clone that you had fixed for me previously. You had fixed the width of the date field. Here is the link to that Q & A between us and the link to the fixed form you provided me with.

    http://www.jotform.com/answers/645620-How-to-prevent-the-date-field-from-expanding-100-percent-width-when-mobile-responsive-is-enabled#9

    http://www.jotformpro.com/form/52342508962962

    The first thing I encountered is that when accessing the CSS editor in the designer, the designer buttons never became green, active and usable even after selecting a field to edit. I tested this on fresh forms that had no CSS in them yet and the editor worked just fine. It will not work in the form that I used as a template that you earlier provided me with in the links above.

    Next, I tried to inject the code you provided me with above into a fresh form that has only the Time Selector field set to range. I injected it through the Preferences in the form editor under the Form Styles tab and it made no fifference either on my mobile device or the previewer in the Designer.

    Then I tried to past it right into CSS in the Designer and it made no difference either. (NOTE: the CSS editor stated that there are errors in the code so it is not updating the CSS.

    Then I tried to simply use the CSS editor in the Designer itself and change the field width in ranges from 180 px. to 260 px to 100% to 80% and nothing makes it stay across the display. It will stack the first half of the range over the second half of the range in all emulators in the Designer viewer 

    HH MM until

    HH MM

    EXCEPT the phone emulator in the Designer and then it's all stacked vertically

    HH

    MM

    until

    HH

    MM

    It does this on my phone as well. It continues to stack vertically on both a phone and the Designer emulator as long as the form is in responsive mode. 

    This is the same thing that the date field does when the form is in responsive mode. This is the issue you fixed for me in the links I referenced first. It doesn't seem to work on this field though.

    I've watched the tutorials and tried a wide variety of combinations. I'm REALLY SORRY that I can't make this work. Can you please help me further? Thank you for all your effort to help me.

  • BJoanna
    Replied on September 21, 2015 at 4:04 AM

    If I understood you correctly you want your form to look like this on mobile devices.

    Mobile Formatting of Certain Fields Image 1 Screenshot 20

    I have cloned your form: http://form.jotform.us/form/52613504608148? 

    Then I have added mobile responsive widget and I added this code:

    @media only screen and (max-width: 40em){

    .form-dropdown, .form-textarea, .form-textbox {

        width: 80%!important;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        Float: left!important;

    }}

    .form-dropdown {

        padding: 1px!important; 

    }

    Here is my demo form: http://form.jotformpro.com/form/52631760981964? 

    Feel free to clone it

    Hope this will help.

  • eventzhire
    Replied on August 27, 2016 at 8:47 AM

    Hi - I'm trying to achieve the same result.

     

    However your form does not show correctly on an actual iphone ( all the emulators suggest otherwise )

    It works fine on andriod ( google chrome ) but not on Iphone ( safari & chrome)

     

    Any ideas?

     

  • Jan
    Replied on August 27, 2016 at 10:51 AM

    @eventzhire

    I created a separate thread for you. Here's the URL: https://www.jotform.com/answers/918391.

    Thank you.