Formatting Configurable List Widget with CSS.

  • Profile Image
    rtolmach
    Asked on October 23, 2021 at 03:01 PM

    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!


  • Profile Image
    Amin_N
    Answered on October 23, 2021 at 10:24 PM

    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.

    1635041439_6174c09f3f3c3_

    1635041267_6174bff39fcf7_

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

    .mobileColumnName.translatable {
       display: block ruby !important;
    }


    Result:

    1635042426_6174c47af36c3_


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

    .remove {
       background-color: red !important;
       box-shadow: none !important;
       color: white !important;
    }


    Result:

    1635041988_6174c2c4e3846_

    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:

    1635042198_6174c396d17ed_

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

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

  • Profile Image
    rtolmach
    Answered on October 23, 2021 at 10:54 PM

    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.

    1635043025_6174c6d14e4d9_


    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.

    1635043301_6174c7e5943ff_


    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!


  • Profile Image
    Amin_N
    Answered on October 24, 2021 at 12:23 AM

    Hi again,

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

    1635048733_6174dd1dc537a_

    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:

    1635048918_6174ddd65a9b6_

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

    .remove-icon {
       text-shadow: none !important;
    }


    Result:

    1635049246_6174df1e611d2_

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

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

  • Profile Image
    rtolmach
    Answered on November 21, 2021 at 10:24 PM

    Thank you again for this!


  • Profile Image
    rtolmach
    Answered on November 21, 2021 at 10:31 PM

    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!

  • Profile Image
    Sam_G
    Answered on November 22, 2021 at 05:19 AM

    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;

    }

    1637576309_619b6e7555812_

    It should look like this:

    1637576335_619b6e8f71108_

    I hope this helps.