-
Winston KinotiAsked on January 19, 2024 at 7:31 AM
Hi. Is there a way to change the display of empty values in the preview-before-submitting widget. At the moment, I have turned the display vertical using this CSS code:
```
/* display the Configurable List widget's fields vertically */
#previewContainer ul li div table tr {
display: inline-grid !important;
}
#previewContainer .table-grid .table-head{
padding: 5px !important;
font-size: 13px !important;
}
```
And the empty values are not displayed in line with the headers.
-
Jovanne JotForm SupportReplied on January 19, 2024 at 10:35 AM
Hi Winston,
Thanks for reaching out to Jotform Support. We can use Custom CSS code to align the configurable list field question and answer in the preview mode. Let me show you how to set it up in your form:
- In the Form builder, click on the blue Roller Paint icon.
- From the Form Designer panel, select the Styles Tab.
- Next, scroll down a bit and inject the following code below inside the Custom CSS area.
/* align the configurable list field question and answer */
#previewContainer .table-grid .table-col {
padding: 5px !important;
height: 28px !important;
}
/* end */
Here's the result:
Give it a try and let us know if there's anything else we can help you with.
-
brillkinotiReplied on January 20, 2024 at 4:13 AM
Thanks. That worked. Can the table be left aligned?
-
Kenneth JotForm SupportReplied on January 20, 2024 at 5:24 AM
Hi Winston,
We would like to clarify whether you meant this form and whether you meant to align the Table Text/Labels to the left? If so, then it appears to be left align already as shown in the screenshot below:
If you meant something else, please elaborate and share screenshots so we can assist you better. Thank you for using Jotform.
-
brillkinotiReplied on January 21, 2024 at 1:09 AM
Hi, I meant that the table in the preview widget is currently centered, and I would like it to be on the left.
-
Kenneth JotForm SupportReplied on January 21, 2024 at 2:19 AM
Hi Winston,
Thank you for clarifying. To position the table columns to the left, kindly use the code below and apply to the Inject Custom CSS Area:
#previewContainer .table-grid .table-body {
text-align: left;
}
Below is a screenshot of how it should look:
If you have questions, please let us know.