-
kidsallianceAsked on February 12, 2016 at 3:42 PM
I set up a configuration widget, but all the columns do not fit. It is running off the page and I can't find seem to change the font size on the columns either.
-
BorisReplied on February 13, 2016 at 5:23 AM
We can force Configurable List to display a line in two rows with a bit of custom CSS, though as it is a table element it requires custom coding for each column of the table.
I have checked your last edited form, and here is the custom CSS code for your exact configuration of the Configurable List widget that makes it display in multiple rows:
.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}
.col1 [type="text"] { width: 100px; }
th { display: none; }
td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7 {
display:inline-block;
float: left;
padding: 20px 5px 1px 1px;
width: 30%;
}
td.col1:before { content: "Name: "; }
td.col2:before { content: "Ethnicity: "; }
td.col3:before { content: "Gender: "; }
td.col4:before { content: "Date of Birth: "; }
td.col5:before { content: "Age: "; }
td.col6:before { content: "Disabled: "; }
td.col7:before { content: "Status: "; }
td.col7 { width: 60%; }You can add the above CSS code to your Configurable List widget by clicking on its wand-shaped icon, switching to Custom CSS tab, and pasting the code there. Please take a look at the following image for visual guidance:
Here is a cloned version of your form with the change applied, so that you can see it in action:
https://form.jotformpro.com/form/60431802297958
The Configurable List has been moved to top of the form, for easier access to it. I have also noticed you had a line in your General configuration which shouldn't really be there "table {border-spacing: 5px !important;}". Please also try removing that line from under the General tab of your widget:
Let us know how it goes, or if you need further assistance, and we will be happy to help.