align the configurable list field questions and answers

  • Winston Kinoti
    Asked 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 Support
    Replied 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:

    1. In the Form builder, click on the blue Roller Paint icon.
    2. From the Form Designer panel, select the Styles Tab. 
    3. 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 */


    align the configurable list field questions and answers Image 1 Screenshot 30

    Here's the result:

    align the configurable list field questions and answers Image 2 Screenshot 41Tekstkleur in de headers is verandert van wit naar zwart Image 1 Screenshot 20 Screenshot 52

    Give it a try and let us know if there's anything else we can help you with.

  • brillkinoti
    Replied on January 20, 2024 at 4:13 AM

    Thanks. That worked. Can the table be left aligned?

  • Kenneth JotForm Support
    Replied 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:align the configurable list field questions and answers Image 1 Screenshot 20

    If you meant something else, please elaborate and share screenshots so we can assist you better. Thank you for using Jotform.

  • brillkinoti
    Replied 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 Support
    Replied 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:

    align the configurable list field questions and answers Image 1 Screenshot 20

    If you have questions, please let us know.