-
MartinCoAsked on March 18, 2017 at 12:30 PM
Hi,
I've added Configurable widget, it's not showin well on mobile screens, just followed
https://www.jotform.com/answers/416834-Configurable-list-widget-on-mobile-devices
but no use. Can you please suggest a appropriate code for the widget. You will see in my form, I've used widget multiple times; so I need that fixed :)
Looking for help.
Many thanks
Page URL: https://form.jotform.me/70745086704459 -
Kevin Support Team LeadReplied on March 19, 2017 at 12:00 AM
To display the widget properly in mobile devices, it's needed to inject some CSS code that will modify the widget's layout while viewing it on a mobile device.
The code explained below will need to be added between this mobile responsive code:
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
/* All given code here*/
}
Now, this part of the code is fixed:
th {
display: none;
}
tr {
display: block;
}
The next part of the code is to display each column title, you will need to add or delete classes based on the number of columns your widget has:
.col1:before, .col2:before, .col3:before, .col4:before,.col5:before {
font-weight: bold;
display: block;
}
If your widget would have 6 columns then you will need to simply add ".col5:before" to the code.
The next code is to show the column title again, it will change based on the number of columns you have too, example:
td.col1:before {
content:"Pre-condition selection 1";
}
If you would have 6 columns then you will need to add until "td.col6:before" to set the proper title.
Now, with the next code you will display the fields one right below each other:
td {
display: block;
position: relative;
top: 3px !important;
margin-left: 0px;
}
You could also customize the given code to display the widget as desired. Also, all the code needs to be injected in the Inject CSS tab of the widget settings:
Hope this helps.