Configurable List Widget: display vertically

  • Profile Image
    martindan
    Asked on August 22, 2017 at 02:09 PM

    I am using the Configurable List Widget as it allows me to have several input types.  On my form I need to have name on one row and the choices (dropdown boxes) be on the second row so everything fits.  I have tried to copy and paste and update the CSS code from other examples and it isn't working for me.  Can you please update the CSS so that it puts the medication choices on a second row?

     

     

  • Profile Image
    aubreybourke
    Answered on August 22, 2017 at 03:00 PM

    I created a demo here:

    https://form.jotformpro.com/72335338204956

     

    For the configurable list widget to appear vertically.

    Here's the field configuration:

    : static : First Name
    : text
    : static : Last Name
    : text :
    : static : Grade
    : number :
    : static : Health Card
    : text :

     

    And here's the CSS:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    input[type=text] {
    height: 25px;
    }
    .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8
    {
    display: block !important;
    width: 100px;
    }
    .col8{
    margin-bottom: 50px !important;
    }

  • Profile Image
    aubreybourke
    Answered on August 22, 2017 at 03:11 PM

    And for the second configurable widget (medication) to appear vertically as well.

     

    Field configuration:

    : static : Child's Name
    : text :
    : static : Upset Stomach (Gravol/Tums)
    : dropdown : No, Yes: Please Select
    : static : Allergies (Benadryl/Reactine)
    : dropdown : No, Yes: Please Select
    : static : Cold/Sore Throat (Cough Syrup
    : dropdown : No, Yes: Please Select
    : static : Upset Stomach (Gravol/Tums)
    : dropdown : No, Yes: Please Select

     

    Custom CSS:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 10px;
    }
    input[type=text] {
    height: 25px;
    }
    .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10{
    display: block !important;
    }
    .col10{
    margin-bottom: 50px !important;
    }

  • Profile Image
    martindan
    Answered on August 22, 2017 at 03:36 PM

    Thanks that works well.  Is it possible to have all four choices appear on the second row to save space?  If they don't fit could you make it so there are two choices per row?

    Is there a way to set up a condition that pre populates this from the "First Name" on the top of the form so that when the user gets to the medication section the names of all registrants are already there?

    Finally there is a large gap between "Child's Name" and the header.  Any way to reduce that?

     

    Thanks so much for your quick response.

  • Profile Image
    aubreybourke
    Answered on August 22, 2017 at 04:22 PM

    I have revised the demo:

    https://form.jotformpro.com/72335338204956

     

    Fields Configuration:

    Child's Name: text :
    Upset Stomach (Gravol/Tums) : dropdown : No, Yes: Please Select
    Allergies (Benadryl/Reactine) : dropdown : No, Yes: Please Select
    Cold/Sore Throat (Cough Syrup) :dropdown : No, Yes: Please Select
    Upset Stomach (Gravol/Tums): dropdown : No, Yes: Please Select

    Custom CSS:

    body{
    height: 500px;
    }

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 10px;
    }
    input[type=text] {
    height: 25px;
    }
    th{
    width: 50px;
    }
    .col1{
    position: relative;
    top: 60px;
    margin-top: 100px;
    }
    .col2, .col3, .col4, .col5{
    position: relative;
    left: -125px;
    }

    button{
    position: relative;
    left: 350px;
    margin-bottom: 100px;
    }

     

     

  • Profile Image
    martindan
    Answered on August 22, 2017 at 04:44 PM

    So close in getting this right.  I actually wanted to have the name still appear on the top with the options below.  I was able to switch that myself.  Is there a way to put a bit more spacing between the options as they are a bit tight right now.  Also there is alot of space on the bottom of that field can you remove that empty space?  Finally the "x" to remove a "child" floats over the background making it hard to see.  Can that also be moved so that it is on the actual form like the rest of the options. 

     

    Here is the current form with the name back on top:

    https://www.jotform.com/build/72325663142250

     

    Thanks again for all your help with this.

     

  • Profile Image
    BDAVID
    Answered on August 22, 2017 at 06:24 PM

    I found it hard to troubleshoot the current design implemented through the CSS injection. However, I have created another code to put all fields vertically, you may consider this other alternative:

    th {

        display: none;

    }

    td{

        display: block;

        position: relative;

        margin-left: 0px;

        width: 200px;

    }

    td.col4{

    width: 220px;

    }

    td.col1:before {

    content: "Child's Name";

    font-weight: bold;

    }

    td.col2:before {

    content: "Upset Stomach (Gravol/Tums)";

    font-weight: bold;

    }

    td.col3:before {

    content: "Allergies (Benadryl/Reactine)";

    font-weight: bold;

    }

    td.col4:before {

    content: "Gold/Sore Throat (Cough Syrup)";

    font-weight: bold;

    }

    td.col5:before {

    content: "Upset Stomach (Gravol/Tums)";

    font-weight: bold;

    }

    td{

    margin-top: 10px !important;

    margin-bottom: 10px  !important;

    }

    td.col6:after {

        content: "----------------------------------------";

        float: left;

    }

    Result: https://form.jotformpro.com/72336994080967?jumpToPage=2 

    You may clone my form if you want to: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    URL to my form: https://form.jotformpro.com/72336994080967