Formatting the Configurable List Widget

  • marinamoehring
    Asked on November 28, 2021 at 9:09 AM

    Our wish would be for your company to have its own configurable list since the list that is a widget has issues when it comes to appearance especially on mobile phones (responsive) and looking like the rest of the form in terms of the actual input fields and general appearance.

    In our case, we have patients putting in their medications. I have been given some help but no help has worked to the point of a good solution thus far.

    I did use the custom CSS suggested but, I remain having problems:

    #list {

    width: 50%;

    border-collapse: collapse;

    }

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

    display:block

    ;

    padding: 10px 1px;

    }

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

    display: 100%;

    }

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

    border-top: 10px solid #ccc;

    }

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

    padding-top: 10px;



    }

    #list {

    width: 100%;

    border-collapse: collapse;

    }

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

    padding: 10px 1px;

    }

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

    }

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

    border-top: 15px solid #ccc;

    }

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

    padding-top: 20px;

    }

    input {

    height: 30px !important

    ;

    }

    Here is what I would like the input fields to emulate the rest of the form's template fields: 1638108101 61a38bc5ebc27  Screenshot 10Here is what some of the configurable list look like now:

    1638108173 61a38c0ddf1f0  Screenshot 211638108192 61a38c208e520  Screenshot 321638108285 61a38c7d8b1cc  Screenshot 431638108215 61a38c370177d  Screenshot 54

  • marinamoehring
    Replied on November 28, 2021 at 9:13 AM

    The Allergy to Antibiotics is the closest I have been able to get the widget to look a bit like the rest of the form. The headers are not on each field and the inside is not looking right either. Can you help?

  • Nina_J
    Replied on November 28, 2021 at 9:28 AM

    Hello,

    Thank you for contacting Jotform Support.

    Please allow me some time to check on your query. I will get back to you as soon as I can.

    Thanks!

    Nina

  • Nina_J
    Replied on November 28, 2021 at 9:54 AM

    Hi @marinamoehring,

    Thank you for patiently waiting.

    Looking into your screenshots above, you would like to have another field where they can type in freely the information needed such as medications, etc.

    e.g

    1638111004 61a3971c39cf0  Screenshot 10

    Have you tried using the Multiple text fields widget?

    1638111164 61a397bc2ba8c  Screenshot 21

    1638111194 61a397dab5005  Screenshot 32

    Please let us know if that suits your need, otherwise, I apologize if I misunderstood your concern.

    Regards,

    Nina



  • marinamoehring
    Replied on November 28, 2021 at 10:14 AM

    Sorry but the patients need to be able to add medications. I did try to use that widget. This is actually more involved. Thanks in advance.

  • Sam_G
    Replied on November 28, 2021 at 10:55 AM

    Hello Marinamoehring,

    You may add this CSS directly into the Configurable list widget CSS tab.

    .form-textarea {

    max-width:45% ;}

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

    #list {

    width: 100%; border-collapse: collapse;

    } #list tbody:first-child > tr > td{

    display:block; padding: 6px 0;

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

    border-top: 1px solid #ccc;

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

    padding-top: 20px;

    .mobileColumnName {

    display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;

    .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {

    width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;

    .buttonsColumn {

    text-align: right;

    }

    .add, .remove {

      white-space: nowrap;

      margin-left: 195px;

      width: 295px;

    }

    1638114928 61a3a670adb2e  Screenshot 10

    I hope this helps.