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

  • Profile Image
    info.grahambrown
    Asked on March 27, 2019 at 03: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. 


  • Profile Image
    info.grahambrown
    Answered on March 27, 2019 at 03: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.PNG

  • Profile Image
    info.grahambrown
    Answered on March 27, 2019 at 03: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.PNG

    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?

  • Profile Image
    info.grahambrown
    Answered on March 27, 2019 at 03:53 PM

    Input Table question:

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

    1553716429Screenshot Question 6.PNG

  • Profile Image
    Alan_D
    Answered on March 27, 2019 at 07: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.gif
    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 ;}
    }
    15537292151.png

    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;}
    }
    15537300343.png1553730181bandicam20190328024151383.gif
    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


  • Profile Image
    info.grahambrown
    Answered on March 31, 2019 at 09: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

     

  • Profile Image
    Nik_C
    Answered on April 01, 2019 at 04:30 AM

    Maybe you could insert text right above the table:

    15541070082019-04-01_10-20-59.png

    And move it with CSS:

    15541070212019-04-01_10-23-14.png

    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!