How to keep Configurable List Widget and input table format the same as desktop when viewing on a mobile

  • info.grahambrown
    Asked on March 27, 2019 at 3:48 PM

    Hi Jotform


    I am building a Questionnaire for accounting clients to complete to help us with completing their accounts/tax returns. I am having some issues making this mobile friendly, particularly where there is an input table or a configurable list widget. In the classic template, you have to scroll across to see the whole table or configurable list when using a mobile. In the Cards template, it turns my configurable list into a vertical list of questions, instead of its table like format, and the input table is no longer a table and you answer each row of the table in separate pages. 

    How can I get my configurable lists and input tables to format nicely on a tablet and mobile just like they do when viewing on a desktop?

    I would like to use the JotForm Cards for this Questionnaire, but need the information collected in table formats to show up nicely on desktops, tablets and mobiles. 


    Jotform Thread 1773994 Screenshot
  • info.grahambrown
    Replied on March 27, 2019 at 3:50 PM

    I'm also hoping you can help with my below questions for the Configurable List widget custom CSS:

    2.

    I would like to do conditional formatting within the widget. If they select yes in a dropdown box, then it will show two additional questions, if they select no these questions do not show - see Screenshot

     


    1553716176Screenshot Question 2 Screenshot 10

  • info.grahambrown
    Replied on March 27, 2019 at 3:52 PM

    3.

    When I have too many fields that it goes across the page, how do I get fields to appear below in two rows? - see Screenshot for an example of what I would like this to look like, and to get the second row ('Trade-In' and 'Amount Traded-in) to appear directly under 'Description'1553716326Screenshot Question 3 Screenshot 10

    4. 

    How do I change the size of my text and textarea boxes?

    5. How do I change the size of my date boxes and delete the calendar icon?

  • info.grahambrown
    Replied on March 27, 2019 at 3:53 PM

    Input Table question:

    6. How to make some boxes not appear - see screenshot 

    1553716429Screenshot Question 6 Screenshot 10

  • Alan_D
    Replied on March 27, 2019 at 7:43 PM

    Unfortunately, we aren't able to inject custom CSS codes into Card Forms. So, configurable list and input table elements in Card Forms aren't styleable.
    For classic forms, reducing fields can make the job difficult for the user. It would be easier to scroll the configurable list widget instead.
    1553728724bandicam20190328021507630 Screenshot 10
    Please insert this code into the custom CSS page for each configurable list widget.
    @media only screen and (max-width: 640px) {
    #listContainer{overflow-x: scroll ;}
    }
    How to keep Configurable List Widget and input table format the same as desktop when viewing on a mobile Image 21

    For input table that in your screenshot, please insert this CSS code into form CSS page.
    @media only screen and (max-width: 640px)
    { #cid_57{overflow-x: scroll !important;}
    }
    How to keep Configurable List Widget and input table format the same as desktop when viewing on a mobile Image 321553730181bandicam20190328024151383 Screenshot 43
    To avoid confusion I have split your questions as below.
    Question 2 https://www.jotform.com/answers/1774193,
    Question 3 https://www.jotform.com/answers/1774195,
    Questions 4 and 5 https://www.jotform.com/answers/1774198,
    Question 6 https://www.jotform.com/answers/1774199


  • info.grahambrown
    Replied on March 31, 2019 at 9:09 PM

    Thanks for that, I have added the CSS codes. Is there a way to make it obvious that you need to scroll across, like an icon that says to scroll across?

     

    Also, the names of the rows on my input table get cut-off and don't read well. 

    E.g. the row name is Heifer Calves, but looks like this on the mobile:

    Heifer C

    alves

     

    How can I make it so the row names don't put half a word on one line and then the rest on the next?1554082128Screenshot Question 1   Input Screenshot 10

     

  • Nik_C
    Replied on April 1, 2019 at 4:30 AM

    Maybe you could insert text right above the table:

    15541070082019 04 01 10 20 59 Screenshot 10

    And move it with CSS:

    15541070212019 04 01 10 23 14 Screenshot 21

    Regarding rows width, you can insert Custom CSS in your widget:

    @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 

    th.form-matrix-row-headers {

        width: 100px;

    }

    }

    You can increase the width if needed.

    That CSS will work only when viewed on mobile.

    Hope it helps.

    Thank you!