Formatting Configurable List Widget with CSS.

I have a Configurable List Widget. Having trouble formatting it:

(1)

In the Fraternities section, the Jotform gear initially showed the width to be 650, which was a little bit wide. I changed it to 600, and that reduced the width down to about half inch. Yikes. Tried to go back to 650, but nothing changes. --- Oh, this is really weird. I see that the fields are very narrow in the Build mode, but they appear OK in the Published page. I am lost.

(2)

In the Sororities section, the long labels wrap, even when there is plenty of room available for them. How do I prevent that from happening?

(3)

I figured out how to change the color on the "Add" button, but not on the "delete" button.

Also, it has the text on the button has a white shadow. How do I get rid of it?

(4)

Also, I have a thick black line beneath the last entry, but what I really want is a thick black line beneath every entry (instead of a thin grey line, which is almost invisible) so it is easy to distinguish the entries.

I sure wish more of the options were menu-driven instead of obscure CSS, which many of us do not know.

Thanks!

Hi there,

Thanks for reaching out to us!

1) The widget is 650px in width, and it looks the same in Build and Preview as shown below.

2) Kindly inject the following CSS code into the widget:

.mobileColumnName.translatable {

   display: block ruby !important;

}

Result:

3) Kindly inject the following CSS code into the widget:

.remove {

   background-color: red !important;

   box-shadow: none !important;

   color: white !important;

}

Result:

Related guide: How-to-inject-css-codes-to-widgets

4) Kindly inject the following CSS code into the widget:

#list tbody:first-child > tr + tr + tr {

   border-top: 7px solid black;

}

Result:

Related guide: How-to-inject-css-codes-to-widgets

Should you have any further inquiries, we will be more than happy to help.

Hi Amin

Thanks.

===========================================

(1)

I changed the 650 width to 600. It again shows the rows very narrow in build mode. Here is a screen grab.

Hmm, I refreshed the page, and now it looks correct. Seems like a glitch.

===========================================

(2)

I added the CSS code you provided to both the Fraternity and Sorority configurable list widget. The last word of the last rows ("emails") still wraps to the next line.

I refreshed the page. That did not help. I see the same in Build and Publish mode.

On mobile view of the same Config List widget, the last four items in the list all wrap prematurely.

===========================================

(3)

I inserted the code and changed red to my blue, and changed the text from white to black.

I think you missed the part of my question: how do I remove the white shadow from the text on the add and remove buttons?

===========================================

(4)

That works. Thanks!

Hi again,

1) It doesn't. Here's how it looks in Builder:

Please reload the page, or make sure you try in a different browser.

2) Kindly inject the following CSS code into the widget:

.mobileColumnName.translatable {

display: contents !important;

}

Result:

3) Kindly inject the following CSS code into the widget:

.remove-icon {

   text-shadow: none !important;

}

Result:

Related guide: How-to-inject-css-codes-to-widgets

Should you have any further inquiries, we will be more than happy to help.

Thank you again for this!

Hello JF

I tried the guidance above in a new file, and it is not doing what I need.

Specifically, I want a thick black line between each of the entries in the Configurable List. However, the line only appears after the last one. The intermediate lines are thin and grey.

Here is the new form where I am having trouble with it.

https://form.jotform.com/213248470863156

Thank you!

Hello Rtolmach,

Kindly add this CSS codes:

#list > tbody:first-child tr td.col1 {

  padding-top: 20px;

  border-bottom: 1px solid black !important;

}

#list > tbody:first-child tr td.col2 {

  padding-top: 20px;

  border-bottom: 1px solid black !important;

}

#list > tbody:first-child tr td.col3 {

  padding-top: 20px;

  border-bottom: 1px solid black !important;

}

#list > tbody:first-child tr td.col4 {

  padding-top: 20px;

  border-bottom: 1px solid black !important;

}

It should look like this:

I hope this helps.