User Guide

 

How to Style, Change the Layout and Customize the Configurable List Widget

How to Style, Change the Layout and Customize the Configurable List Widget

Hey there! Here's a guide that would allow you to style the famous Configurable List widget. It's one of the highly customizable widget that we have. If you are not yet familiar with it, you can check out this guide

The steps below will help you on how you can style, change the layout and make the Configurable list widget responsive or mobile ready. You can do by injecting custom CSS codes in your widget directly.

To help you better view them, here's a sample form I made: https://form.jotformpro.com/72281500255953. You can have a copy of this form in your account by cloning it.

 

Method #1: Making the widget in to two column or mobile view ready.

In my sample form, you can navigate in page 2 and you'll see the widget there, formatted in two column layout. 

 

We know that the Configurable list widget treats each entries as a row, the problem is that if you have a lot of columns, it doesn't look good in mobile view. So if you prefer something like a vertical layout, then this solution might work for you. You can check the script on this link.

To apply the code in your end, here's what you need to do:

1. First, count the number of columns you have and then copy the code in the link I shared.

2. In my CSS code, you can see this section of my code:

3. The number of my columns in the widget represents those, we need to add the column labels here after the style property content. In my case, I have 9 columns, then I need to add the respective column headers in the content value. If you have more than 9, then simply copy one line of the code, then change the nth-of-type(#) to represent that column index. If you have less than 9, then simply delete the line of codes. 

Example:

td:nth-of-type(1):before { content: "Check Box"; } => This represents column 1, you need to change the content value to the actual column header you have.

4. After you have successfully edited your own version of the CSS code, you can inject it in your widget, you can do that by following this guide.

 

Method #2: Moving columns into a new line. 

There are users who just want to move other columns in a new line. 

1. Navigate to page 2 of my sample form.

2. Below you can see that this is still a one row or one entry in the widget, but the other columns are moved in a new line. 

 

3. You can find this CSS code in this page link. This CSS code is a little complex and you need to make some adjustments based on your own setup. 

5. First, count the number of columns you have in your widget. In my case, I have 9, take note of yours. 

6. In my code, you can see this section. This are the columns you want to move to a new line, in my case, I want the 6th to the 9th column to be moved on a new line. 

 

7. Now simply set the number in the CSS selector to represent the columns, example:

td.col6 => represents the 6th column

td.col7 => represents the 7th column

and so on...

 

8. You should copy the style property shown in the code, this means that all of the columns you want to be moved in the new line should be formatted like this:

td.col# {

display: inline-block;

position: relative;

top: 10px !important;

}

 

9. Now after that, find this section in my code. You need to list here all the columns you have. 

The format of the CSS selector is .col + column # + :before. Example:

.col1:before => Represents your column 1.

.col2:before => Represents your column 2.

and so on...

You need to add ALL of your columns here, I have 9 columns so you can see I have 9 of these CSS selectors. 

 

10. Next, you need to re-label your column headers. You can see this section in my code.

 

Basically, the label or column headers you initially set in your widget should be repeated here. Example:

td.col1:before {

content: "Check Box";

}

This should be the code for your column 1, change the value in the content property to the actual label or column header. 

11. After you have your own version of your CSS code, you can simply inject it in your widget

 

Method #3: Styling the border or the table.

The custom CSS code here can be found in the W3Schools CSS Tutorial. You can apply the same CSS code in the widget. Below are some examples:

Style #1: Bottom Border Style Table

 

You can achieve that style by using this CSS code:

th, td {

    border-bottom: 1px solid #ddd;

}

 

Style #2: Alternate Table Color with Header

You can achieve this by using this CSS code:

th {

    background-color: #4CAF50;

    color: white;

}

tr:nth-child(even) {background-color: #f2f2f2}

 

Style #3: Solid Black Border

 

You can achieve this by using this CSS code:

table, th, td {

   border: 1px solid black;

}

th, td {

    padding: 15px;

    text-align: left;

}

 

So far those are the different methods on how you can customize your Configurable List widget in terms of layout and border style.

If you have any questions, concerns or just wanted to leave a feedback, feel free to comment below or contact us on our forum page. 

Send Comment

1 Comment...

  • mitymom

    How can you edit each individual column width. For example, I'm making a row with 3 text fields. One field is for a 5 digit number, second is first name, and third is last name. I want the last name to be largest, first name to hold at least 25 characters, but the first column I want to be large enough for 7 characters maximum. Those columns plus the hidden Remove a Row button should fit the row which I edited to be 600 px wide. I've tied just about everything and cant get it. My project is due asap. please help.