How do I adjust the Input Table field so it displays properly on mobile device?

  • Profile Image
    jaketest
    Asked on February 09, 2018 at 06:43 AM

    I need to adjust the input table option, on a form that I have made.

    I have the mobile responsive widget that does work great for other things scaling it to different devices.

    However when you have more the one column of drop down fields, It makes the fields unreadable even though there is plenty of room on the devices screen.

    I have noticed there is a lot of dead space on the title fields, Which doesn't need all this space ?

    Is it possible to shrink this down somehow ? and thus have more space on a mobile device to select the dropdown fields ???

    This is currently a trial before subscribing but need to iron out this issue

  • Profile Image
    Welvin
    Answered on February 09, 2018 at 09:23 AM

    Our forms are already responsive by default, so you do not need the widget. The widget is only a backup just in case something will go wrong with your formatting with custom CSS and other styles such as those with the Advanced Designer.

    I checked your form on a mobile device, and the input table is responsive. You've mentioned Dropdown, but you have radio as the input type. If you are referring to something else, let us know, so we can check.

    The space, you mean the space on the Field Labels? There is a bottom margin of the field label when it is set to the top. It's 9px. You can override this by injecting the following custom CSS codes:

    .form-label-top, .form-label-left, .form-label-right {


    margin-bottom: 4px !important;

    }

    Just change 4px if you want it to be closer. 

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

    If you mean the space between fields, you can adjust that in the settings.

    https://www.jotform.com/help/62-How-Can-I-Change-Spacing-Between-Questions 


    I hope that helps. Let us know if you need further assistance.

  • Profile Image
    jaketest
    Answered on February 09, 2018 at 09:39 AM

    this is what I am referring to :

    https://postimg.org/image/5oqfznw0b/

    On this form:

     

    https://form.jotformeu.com/80382141715350

     

    It makes the dropdown boxes to the side unusable ?, I have tried your code but no joy it doesn't need to be that wide on the sides ?, And should resize itself to make it more usable ?,

    that's why im thinking it needs some custom CSS injecting

  • Profile Image
    Welvin
    Answered on February 09, 2018 at 10:56 AM

    The custom size is only applied to the desktop version, not on mobile devices so yes, that needs to be adjusted with custom CSS codes. You can add the following CSS for mobile:

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

    [data-type="control_matrix"] .form-dropdown {

        width: 150px !important;

    }

    }

    Adjust the size to your preferred value.


    The CSS to adjust the bottom margin of the label works. Here's a screenshot showing you that:

  • Profile Image
    jaketest
    Answered on February 09, 2018 at 11:10 AM

    Ok i have injected the code and it works when viewing via safari on IOS, However on the emulator and on android native browser it doesn't work.

    Is it possible they are using cached versions ? or a cached version of the form. Or maybe you could try this your end ?

  • Profile Image
    Welvin
    Answered on February 09, 2018 at 11:24 AM
  • Profile Image
    jaketest
    Answered on February 09, 2018 at 11:28 AM

    hi,

    Thanks for the support, have tried on windows phone and that works fine, The android device im trying is a Samsung 7" tablet, This does work when it is landscape format but not when landscape ?, Im assuming this is down to the max device width of 550PX, anything above that will render it differently ?

  • Profile Image
    Welvin
    Answered on February 09, 2018 at 11:51 AM

    Yes, you are correct. The custom CSS codes are only for mobile devices with a resolution not greater than 550px. You can always adjust this value, say 768px or 1024px (for tablets). I'd suggest keeping it that way. It's not that small on the tablet, right? It should adopt the original width like when you are viewing on a desktop. 

    I'd also like to mention that the custom CSS codes is general for all Input Table in the form. Once you add another input table, the CSS will be applied to it when you view the form on a mobile device. 

    If you'd like to apply the custom CSS codes for a specific input table only, you will need to get the field ID and add it to the selector. Example:

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

    [data-type="control_matrix"]#id_44 .form-dropdown {

        width: 150px !important;

    }

    }

    I've added #id_44 next to the data type selector.

    To get the field ID, follow the steps here: https://www.jotform.com/help/146-How-to-find-Field-IDs-Names. In the Input table, it will appear as ex: #input_5_0_0. The first number which is 5 is the actual ID then just replace #input with #id to make it #id_5.