What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by Lifelongtherapy 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?

     

    Thanks,

    Steve

    PS can you forward reply to stevebenthal@gmail.com

    configurable list CSS Custom CSS
  • Profile Image
    JotForm Support

    Answered by ashwin_d on June 19, 2015 at 01: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:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by Lifelongtherapy 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

  • Profile Image
    JotForm Support

    Answered by Mike_G 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:

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

  • Profile Image

    Answered by Lifelongtherapy on June 19, 2015 at 09: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

     

  • Profile Image

    Answered by Ben 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.

  • Profile Image

    Answered by Lifelongtherapy on June 22, 2015 at 09: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

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d 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!