Formatting the Configurable List Widget

  • Profile Image
    marinamoehring
    Asked on November 28, 2021 at 09: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_Here is what some of the configurable list look like now:

    1638108173_61a38c0ddf1f0_1638108192_61a38c208e520_1638108285_61a38c7d8b1cc_1638108215_61a38c370177d_

  • Profile Image
    marinamoehring
    Answered on November 28, 2021 at 09: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?

  • Profile Image
    Nina_J
    Answered on November 28, 2021 at 09: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

  • Profile Image
    Nina_J
    Answered on November 28, 2021 at 09: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_

    Have you tried using the Multiple text fields widget?

    1638111164_61a397bc2ba8c_

    1638111194_61a397dab5005_

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

    Regards,

    Nina



  • Profile Image
    marinamoehring
    Answered 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.

  • Profile Image
    Sam_G
    Answered 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_

    I hope this helps.