How Can I Customize my Configurable List Widget (Text / Buttons / Rows / Columns / Fonts / Colors)?

How Can I Customize my Configurable List Widget (Text / Buttons / Rows / Columns / Fonts / Colors)?

I'd like to change the text color & font in my configurable list widget to match the other text colors of my form: https://form.jotform.com/81906589374168

Also, I'd like to be able to change the colors of the buttons (background and text) to a specific hex # color.

Lastly, how can I adjust the overall width of the configurable list? Right now, each new column I add gets added to a single row. If I want to adjust this so only so many columns are in each row, how would I do so? With the current configuration, the configurable list looks great on a laptop computer. However when I open it on my smartphone, the configurable list overlaps the background color of the form, while the rest of the form looks fine.

Thanks!

To change the text and button color, please inject the CSS below.

th {

  color: #2AA9D1 !important;

 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

}

.add{

   border: none;

   box-shadow: none;

   background: #6DBCF0 !important;

   text-shadow: none;

}

For the mobile responsive widget, you can follow our guide here https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive on how to customize the widget.

Lastly, you can inject the CSS below to adjust the "TEXT" and "DROPDOWN" fields in configurable list widget.

FIRST NAME upto AGE WHEN FIRST LICENSED, inject the CSS code below and adjust the px number to your preferred width.

input[type="text"]{

width: 80px;

}

For the DATE OF BIRTH dropdown element, inject the code below and adjust the px number to your preferred width.

select{

width: 80px;

}

Here's a cloned version of your form with added CSS https://form.jotform.com/81938082084967.

Let us know if you have any questions or if you need further assistance. 

Hi Jed,

Thanks!

-How would I change the color of the "Remove Driver" Button as well? That one Still stays gray.

-Is there a way to change to size of the "Add Driver" / "Remove Driver" Buttons? 

-Also, is there a way to put, say, just 3 or so fields per row and make the other entries on a second column? [Or do all entries have to be either all horizontal / all vertical? :-(  ]

The other color changes worked for me!... 

...But the code on the attached page to make the list compatible on all devices did not work, I've commented on that link as well (The code to make it mobile compatible makes the list vertical, but I want it to be horizontal on a laptop to make it more copmpact and then stack vertically only when necessary, eg. on a mobile device)

For the CSS code you're giving me, is there a tool I can use to auto-generate  or learn this code so I don't have to always use your time? It looks pretty easy, I'm just not sure what the correct key-words are for CSS.

Thanks Jed!

-How would I change the color of the "Remove Driver" Button as well? That one Still stays gray.

To change the color of the "Remove Driver" button of the Configurable List widget in your form, please include the class of the remove button (.remove) in the CSS codes provided by my colleague above.

.add, .remove{

   border: none;

   box-shadow: none;

   background: #6DBCF0 !important;

   text-shadow: none;

}

-Is there a way to change to size of the "Add Driver" / "Remove Driver" Buttons? 

To change the size of the "Add Driver" / "Remove Driver" buttons, please inject the CSS codes below to the widget's custom CSS tab.

.add, .remove {

    width: 85px;

    white-space: pre-wrap;

}

-Also, is there a way to put, say, just 3 or so fields per row and make the other entries on a second column? [Or do all entries have to be either all horizontal / all vertical? :-(  ]

In relation to your next question below, do you want to view the widget in columns on both desktop and mobile view? Or, just on desktop view then only one column on mobile devices? Also, when the fields on the widget are in two columns, would you want the label for each field to be top aligned or left aligned? We need more clarification regarding your requirements.

...But the code on the attached page to make the list compatible on all devices did not work, I've commented on that link as well (The code to make it mobile compatible makes the list vertical, but I want it to be horizontal on a laptop to make it more copmpact and then stack vertically only when necessary, eg. on a mobile device)

I see that you have posted a comment in this guide — How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

With the Configurable List widget's current state in your form, here's how you can make the fields vertical on mobile but would still be horizontal on a desktop.

First, you need to disable the Shrink option of the Configurable List widget.

Then, inject the custom CSS codes below into your form's CSS tab (not in the CSS tab of the widget). How-to-Inject-Custom-CSS-Codes

iframe[src*="configurableList"] {

    width: 100% !important;

}

The codes can also be found at the bottom part of the guide.

For the CSS code you're giving me, is there a tool I can use to auto-generate  or learn this code so I don't have to always use your time? It looks pretty easy, I'm just not sure what the correct key-words are for CSS.

Currently, we do not have a tool that will auto-generate CSS codes needed to style or format the Configurable List widget. We only inspect the widget from the browser to find what needs to be changed base on the requirements.

-Also, is there a way to put, say, just 3 or so fields per row and make the other entries on a second column? [Or do all entries have to be either all horizontal / all vertical? :-(  ]

In relation to your next question below, do you want to view the widget in columns on both desktop and mobile view? Or, just on desktop view then only one column on mobile devices? Also, when the fields on the widget are in two columns, would you want the label for each field to be top aligned or left aligned? We need more clarification regarding your requirements.

Thanks So much for all your help!

On Desktop View, I want the widget in 2 rows: eg From First Name to Date of Birth on 1 row, and from Driver’s license number to Age when first licensed on the next row. 

For Mobile View, it’s fine if they’re all in one column so it will fit better.

I’d like all of the text to be top aligned.

Thank you!

Hello,

I will work to produce the needed code for you and will update you with my results.

I can suggest to use the following code: 

1. Inject this CSS code to your form to make all the config list width to fit on the form.

#id_73, #customFieldFrame_73 {width: 100% !important;}

2. Add the following CSS code into the widget:

#list > tbody > tr:first-child {display: none;}

.mobileColumnName {display: block;}

td {float: left;}

td.col5 {clear: left;}

input { width: 200px !important;}

Let us know if you need more help.

Thank you.

Victoria, 

Thanks! That worked to make it into 2 rows!

However, adding that code changed the label text of configurable list to a different color / style then the rest of this form. How can I change it back to match?

Also, for the Add Driver / Remove Driver buttons what command would I use to change the font size of "Add Driver" and "Remove Driver" and maybe change them to bold as well.

Thanks!

adding that code changed the label text of configurable list to a different color / style then the rest of this form. How can I change it back to match?

Please try changing the following section of the code provided by our colleague @Victoria_K 

.mobileColumnName {display: block;}

with the below code so that the 

.mobileColumnName {

    display: block;

    color: #21a6cf !important;

    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

    font-weight: bold;

}

Also, for the Add Driver / Remove Driver buttons what command would I use to change the font size of "Add Driver" and "Remove Driver" and maybe change them to bold as well.

You may add the following CSS code to the widget to make button text to bold.

button {

font-weight: bold;

}

Thanks!