Configurable List: Display fields in two rows with a static text in each

  • Lifelongtherapy
    Asked on June 18, 2015 at 10:59 PM

    Hi,
    I'm trying to do the same thing.  

    : static : Dressing UB

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    I can get it to work with a new Static Text Label and just copy the rest of the info. But It stays on the same line.  Can't I just Add a Line break somehow?

    Configurable List: Display fields in two rows with a static text in each Image 1 Screenshot 20

     

    Thanks,

    Steve

    PS can you forward reply to stevebenthal@gmail.com

  • Ashwin JotForm Support
    Replied on June 19, 2015 at 1:17 AM

    Hello Steve,

    If I understand your requirement correctly, you want to display the configurable list widget in two rows. Is that correct?

    Please inject the following custom css code in your "Configurable List" widget and that should solve your problem:

    #list > tbody > tr:first-child {

        display: none;

    }

    td.col6 {

      float: left;

      left: -500px;

      position: relative;

      top: 43px;

    }

    td.col7 {

      top: 48px;

      left: -500px;

      position: relative;

    }

    td.col8 {

      top: 48px;

      left: -500px;

      position: relative;

    }

    td.col9 {

      top: 48px;

      left: -501px;

      position: relative;

    }

    td.col10 {

      top: 48px;

      left: -501px;

      position: relative;

    }

    tr {

         height: 100px;

    }

    Please check the screenshot below on how to inject the custom css code in widget and the output of the css code:

    Configurable List: Display fields in two rows with a static text in each Image 1 Screenshot 20

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Lifelongtherapy
    Replied on June 19, 2015 at 10:00 AM

    I see it worked for 2 rows, but I really have a total of 14 rows.

    When I added more the 2nd row indented and the 3rd and 4th don't show.

    Thanks,

    Steve

  • Mike_G JotForm Support
    Replied on June 19, 2015 at 12:11 PM

    Could you try to adjust the "left" property for each column just like this: 

    #list > tbody > tr:first-child {

        display: none;

    }

    td.col6 {

      float: left;

      left: -527px;

      position: relative;

      top: 43px;

    }

    td.col7 {

      top: 48px;

      left: -527px;

      position: relative;

    }

    td.col8 {

      top: 48px;

      left: -527px;

      position: relative;

    }

    td.col9 {

      top: 48px;

      left: -528px;

      position: relative;

    }

    td.col10 {

      top: 48px;

      left: -528px;

      position: relative;

    }

    tr {

         height: 100px;

    }

    It should look like this:

    Configurable List: Display fields in two rows with a static text in each Image 1 Screenshot 20

    I hope this helps. Let us know if you need any further assistance. Thank you. 

  • Lifelongtherapy
    Replied on June 19, 2015 at 9:52 PM

    That straightened out the first column but I need my static text differant for each row.

    Only my 1st 2 rows are showing.

    Here's the full setup.

    : static : Dressing UB

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Dressing LB

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Toileting

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Transfers

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Grooming

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Bed Mobility

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Bathing

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Carrying Objects

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Closet Access

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Kitchen Access

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Making Bed

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Light Cleaning

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Feeding

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    : static : Wheelchair mobility

    STG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

    LTG : dropdown : inc to  0% Asst,inc to 10% Asst,inc to 20% Asst,inc to 30% Asst,inc to 40% Asst,inc to 50% Asst,inc to 60% Asst,inc to 70% Asst,inc to 80% Asst,inc to 90% Asst : Please Select

    Time Frame : dropdown : 5 visits,10 visits,15 visits,20 visits,25 visits,30 visits,35 visits,40 visits : Please Select

     

  • Ben
    Replied on June 20, 2015 at 11:49 AM

    I believe Steve that this is related to this form: http://www.jotform.us/form/42678606523157

    Now usually the answer for static labels in the configurable list would be that it is not possible, but I do like a challenge so lets see what we can do here ;)

    Now the only issue here is - as you will see that there are so many elements, it is easy to make a mistake when editing one of them + it is very inconvenient to make any type of changes on them afterwards.

    For example, to get to this point: http://form.jotformpro.com/form/51703793216960 you need to add this entire CSS code:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    #list > tbody > tr:first-child {
        display: none;
    }
    tr {
        height: 100px;
    }
    span.staticText {
        width: 140px;
    }
    .col6, .col7, .col8, .col9,.col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18, .col19,.col20, .col21, .col22, .col23, .col24, .col25, .col26, .col27, .col28, .col29,.col30, .col31, .col32, .col33, .col34, .col35, .col36, .col37, .col38, .col39,.col40, .col41, .col42, .col43, .col44, .col45, .col46, .col47, .col48, .col49,.col50, .col51, .col52, .col53, .col54, .col55, .col56, .col57, .col58, .col59,.col60, .col61, .col62, .col63, .col64, .col65, .col66, .col67, .col68, .col69,.col70, .col71, .col72, .col73, .col74, .col75 {
      float: left;
      position: relative;
    }
    td.col6 {
        top: 23px;
    }
    td.col8 {
        top: -24px;
    }
    td.col9 {
        top: -48px;
    }
    td.col10, td.col11 {
        top: -72px;
    }
    td.col12 {
        top: -96px;
    }
    td.col13 {
        top: -120px;
    }
    td.col14 {
        top: -144px;
    }
    td.col15, td.col16 {
        top: -168px;
    }
    td.col17 {
        top: -192px;
    }
    td.col18 {
        top: -216px;
    }
    td.col19 {
        top: -240px;
    }
    td.col20, td.col21 {
        top: -264px;
    }
    td.col22 {
        top: -288px;
    }
    td.col23 {
        top: -312px;
    }
    td.col24 {
        top: -336px;
    }
    td.col25, td.col26 {
        top: -360px;
    }
    td.col27 {
        top: -384px;
    }
    td.col28 {
        top: -408px;
    }
    td.col29 {
        top: -432px;
    }
    td.col30, td.col31 {
        top: -456px;
    }
    td.col32 {
        top: -480px;
    }
    td.col33 {
        top: -504px;
    }
    td.col34 {
        top: -528px;
    }
    td.col35, td.col36 {
        top: -552px;
    }
    td.col37 {
        top: -576px;
    }
    td.col38 {
        top: -600px;
    }
    td.col39 {
        top: -624px;
    }
    td.col40, td.col41 {
        top: -648px;
    }
    td.col42 {
        top: -672px;
    }
    td.col43 {
        top: -696px;
    }
    td.col44 {
        top: -720px;
    }
    td.col45, td.col46 {
        top: -744px;
    }
    td.col47 {
        top: -768px;
    }
    td.col48 {
        top: -792px;
    }
    td.col49 {
        top: -816px;
    }
    td.col50, td.col51 {
        top: -840px;
    }
    td.col52 {
        top: -864px;
    }
    td.col53 {
        top: -888px;
    }
    td.col54 {
        top: -912px;
    }
    td.col55, td.col56 {
        top: -936px;
    }
    td.col57 {
        top: -960px;
    }
    td.col58 {
        top: -984px;
    }
    td.col59 {
        top: -1008px;
    }
    td.col60, td.col61 {
        top: -1032px;
    }
    td.col62 {
        top: -1056px;
    }
    td.col63 {
        top: -1080px;
    }
    td.col64 {
        top: -1104px;
    }
    td.col65, td.col66 {
        top: -1128px;
    }
    td.col67 {
        top: -1152px;
    }
    td.col68 {
        top: -1176px;
    }
    td.col69 {
        top: -1200px;
    }
    td.col70, td.col71 {
        top: -1224px;
    }
    td.col65, td.col70 {
        left: -108px;
    }
    td.col6, td.col11, td.col16, td.col21, td.col26, td.col31, td.col36, td.col41, td.col46, td.col51, td.col56, td.col61, td.col66, td.col71 {
        left: -592px;
    }
    td.col7, td.col12, td.col17, td.col22, td.col27, td.col32, td.col37, td.col42, td.col47, td.col52, td.col57, td.col62, td.col67, td.col72 {
        left: -450px;
    }
    td.col8, td.col13, td.col18, td.col23, td.col28, td.col33, td.col38, td.col43, td.col48, td.col53, td.col58, td.col63, td.col68, td.col73 {
        left: -333px;
    }
    td.col9, td.col14, td.col19, td.col24, td.col29, td.col34, td.col39, td.col44, td.col49, td.col54, td.col59, td.col64, td.col69, td.col74 {
        left: -225px;
    }
    td.col10, td.col15, td.col20, td.col25, td.col30, td.col35, td.col40, td.col45, td.col50, td.col55, td.col60, td.col65 td.col70, td.col75 {
        left: -108px;
    }

    Now you will notice that there is a big gap where the fields end and the + to add a new entry starts, which will need a bit of time to get rid of if possible - I do believe it is.

    What I would suggest instead as a much nicer / cleaner way of doing this is to add several configurable list widgets one after another instead or see if the Infinite List could be a better replacement for it.

  • Lifelongtherapy
    Replied on June 22, 2015 at 9:04 PM

    Thank you,

    We got the idea from looking at your work to not use the static text and make that a drop down too.

    That way we don't need 14 lines.  

    Thank you for assisting us, this is working perfect now.

    Steve

     

    Configurable List: Display fields in two rows with a static text in each Image 1 Screenshot 20

  • Ashwin JotForm Support
    Replied on June 23, 2015 at 12:08 AM

    Hello Steve,

    On behalf of my colleague, you are welcome.

    I am glad to know that your form is working as expected.

    Do get back to us if you have any questions.

    Thank you!