-
info.grahambrownAsked 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.
-
info.grahambrownReplied 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
-
info.grahambrownReplied 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'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.grahambrownReplied on March 27, 2019 at 3:53 PM
-
Alan_DReplied 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.
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 ;}
}
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;}
}
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.grahambrownReplied 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?
-
Nik_CReplied on April 1, 2019 at 4:30 AM
Maybe you could insert text right above the table:
And move it with CSS:
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!