Dropdown on Input Table not showing up on smart phones

  • Profile Image
    Chrouton
    Asked on November 15, 2017 at 04:20 PM

    Hello:

    We just started using JotForm and are literally one problem away from launching.  We are utilizing the Input Table option (see attached image) to list out products, so our customers can choose a quantity using the drop down.  It works great in the "Build" screen and we are so excited!  When we test on mobile, the drop down function is not working. Either the numbers do not show on the phone once chosen, or most often the drop boxes are squished together.

    How can we adjust the size of the drop box within an Input Table?  How can we adjust the font color and/or background color within a drop box (specifically within an Input Table)?

     

    undefinedundefinedundefined

  • Profile Image
    Chrouton
    Answered on November 15, 2017 at 04:55 PM

    Is there anybody out there?

  • Profile Image
    Jim_R
    Answered on November 15, 2017 at 06:56 PM

    Hello @Chrouton - The dropdowns are not too visible because of the narrow width of the columns. To fix this, try injecting the following CSS codes:

    .form-matrix-table, .form-matrix-values select {

        width: 100% !important;

    }

    .form-matrix-column-headers {

        min-width: 80px !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

    This should take care of the widths of the dropdown menus within each cell. On top of that, I took the liberty of adding a CSS to automatically adjust the width of the Input Tables so all of them have the same widths.

    Result (cloned copy): https://www.jotform.com/73187387943976 

  • Profile Image
    Chrouton
    Answered on November 15, 2017 at 08:43 PM
    I think this worked perfect!!!!!! THANKS!
    ...