Can a configurable list wrap on my form so that it fits the screen when viewed?

  • blossomwithmaggie
    Asked on June 9, 2017 at 10:19 AM

    In my form Bridal Hair and Makeup Survey, I have a configurable list that I would like to wrap so that it doesn't run off the page. Is that possible?

  • BJoanna
    Replied on June 9, 2017 at 12:28 PM

    It is possible to split the fields into two rows, with custom CSS. If you are familiar with CSS you can do it yourself. Here are some threads, where you can see how this can be done: 

    https://www.jotform.com/answers/595103 

    https://www.jotform.com/answers/678723 

    We can also provide you the CSS code. Just tell us how would you like to split the fields. For example we can move all checkbox field to new row. 

    Let us know if you need further assistance. 

  • blossomwithmaggie
    Replied on June 9, 2017 at 1:43 PM
    I'm not super familiar with css. Could you split it at the check boxes for me please? I really appreciate it!
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • BJoanna
    Replied on June 9, 2017 at 2:38 PM

    Will this work for you? 

    Can a configurable list wrap on my form so that it fits the screen when viewed? Image 1 Screenshot 30

    If so, add this CSS code to Custom CSS field of your Configurable list widget:

    tr {

     display: block;

    }

    th {

       display: none;

    }

    td.col1:before {

      content:"Name";

      display: block;

    }

    td.col2:before {

     content:"Role in Wedding";

     display: block;

    }

    td.col3:before {

       content:"Hair Length";

       display: block;

    }

    td.col4:before {

     content:"Hair Type";

     display: block;

    }

    td.col5:before {

     content:"Updo or 1/2 Updo";

     display: block;

    }

    td.col6:before {

     content:"Vintage Style";

     display: block;

    }

    td.col7:before {

     content:"Thermal Style (no pins)";

     display: block;

    }

    td.col8:before {

     content:"Blow Out (no pins)";

     display: block;

    }

    td.col9:before {

     content:"Makeup";

     display: block;

    }

    td.col10:before {

     content:"Lashes";

     display: block;

    }

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8, td.col9, td.col10 {

    display: inline-block;

    float: left;

    padding-bottom:10px;

    padding-right:15px;

    }

     td.col6, td.col7, td.col8, td.col9, td.col10 {

    display: inline-block;

    float: left;

    padding-right :15px!important;

    }

    Can a configurable list wrap on my form so that it fits the screen when viewed? Image 2 Screenshot 41Here is my demo form: https://form.jotformpro.com/71595545987981 

    Feel free to clone it

    Hope this will help. Let us know if you need further assistance. 

  • blossomwithmaggie
    Replied on June 9, 2017 at 6:43 PM
    Perfect! Thank you!!!
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • blossomwithmaggie
    Replied on June 12, 2017 at 11:43 AM
    Thank you for your help. I inserted the coding you gave me below. I'd like it to split the two lines with the drop downs on line one and the check boxes on line two. Can you help me with that modification? This is what mine looks like after the code you gave me.
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • BJoanna
    Replied on June 12, 2017 at 12:53 PM

    I have inspected your form and configurable list on your form, looks exactly the same as configurable list on my form and on a screenshot I provided.

    Can a configurable list wrap on my form so that it fits the screen when viewed? Image 1 Screenshot 20

    Your screenshot is not shown here on forum. Please note that images that are attached inside of email will not be shown here on forum. You will have to open this thread and upload your screenshot

  • blossomwithmaggie
    Replied on June 12, 2017 at 1:43 PM
    Hmm, when I published and looked at it it didn't appear that way. Ok, thank you. I'll look at it again.
    Maggie Mae
    Blossom Hair Design
    52 Copper St
    Eureka Springs, AR 72632
    720.280.2865
    www.blossomhairdesign.com
    http://m.yelp.com/biz/blossom-hair-design-eureka-springs
    ...
  • BJoanna
    Replied on June 12, 2017 at 2:15 PM

    Please check it again and let us know if there is an issue on your form.

    Please note that your form is responsive and if the width of the form is changed, for example form is viewed on mobile device, fields inside of configurable list will adjust and some of them will be moved to new row, so that all can be shown on the form.