How can I split a configurable list into two rows?

  • Profile Image
    catbahaicamp
    Asked on May 02, 2017 at 12:21 AM

    Hi, I'm working on a configurable list but the width of the form is too small to handle the number of fields I have.

    I'm not sure if the form is presenting right on the page or if the list is actually too long.  I tried adjusting the page width really wide but it still flows over.

    If we can put it into two rows that would help, but I feel like something is off on my total page width somehow.

     

    thanks!

  • Profile Image
    Chriistian
    Answered on May 02, 2017 at 01:25 AM

    Please allow me some time to work on the CSS on your form to split the configurable list into two rows. I'll get back once I'm done.


    Regards.

  • Profile Image
    Chriistian
    Answered on May 02, 2017 at 01:58 AM

    Thanks for your patience. 

    Can you please try to injecting this custom CSS on the Configurable list widget settings?

    div#dateContainer4 {

        position: relative;

        left: -310px;

        top: 70px;

    }

    th.col4 {

        position: relative;

        left: -310px;

        top: 70px;

    }

    th.col5 {

        position: relative;

        left: -300px;

        top: 70px;

    }

    td.col5 {

        position: relative;

        left: -300px;

        top: 70px;

        display: inline-flex;

        height: 150px;

    }

    Result:

    Hope this helps.
    Regards.

  • Profile Image
    catbahaicamp
    Answered on May 02, 2017 at 10:03 PM

    looks awesome!! thank you so much!!

  • Profile Image
    catbahaicamp
    Answered on May 02, 2017 at 10:45 PM

    Ok, I've been experimenting with it some more, but it's not actually fully displaying within the form.  Any subsequent rows added when i click the button, actually get jumbled together.

    Additionally, the line extends off into the right too much. I've played around with the settings but  I can't seem to get them to take effect. I tried outrageous numbers and still nothing changes.

    I tried this in Chrome and I'm attaching a screenshot here.  I also tried it in IE11 and Firefox.  While IE looks the best, not one of the browsers displays everything correctly.

     

  • Profile Image
    ashwin_d
    Answered on May 03, 2017 at 01:16 AM

    Hello,

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

    td.col4 {

        position: relative;

        left: -310px;

        top: 70px;

    color: rgb(255, 255, 255);

    }

     

    td.col5 {

        width: 200px;

    }

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    catbahaicamp
    Answered on May 07, 2017 at 09:37 PM

    I've been messing with it, but I still can't get the whole thing to appear within the frame.  I even re-created the entire widget, thinking maybe I had messed up something totally. The last question is off to the right now.  I could use some help bringing it back into the right spot.  Also, I can't click the button to add more attendees.  it's like the box above it is covering it up and not allowing the click.

    thanks!

  • Profile Image
    Chriistian
    Answered on May 08, 2017 at 01:28 AM

    Hi,

    I had replaced all the CSS injected on your form with these codes below:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    th { display: none; }

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {

    display:inline-block;

    float: left;

    padding: 20px 5px 1px 1px;

    }

     

    td.col1:before { content: "Attendee Name";}

    td.col2:before { content: "Sex"; }

    td.col3:before { content: "Fall Grade Level "; }

    td.col4:before { content: "Date of Birth "; }

    td.col5:before { content: "Lodging ";}

     

    input[type=text] {

        width: 120px;

        position: relative;

        left: -110px;

        top: 20px;

    }

    td.col1 {

        width: 60%;

    }

    td.col2 {

        position: relative;

        left: -100px;

    }

    td.col3 {

        position: relative;

        left: 220px;

        top: -80px;

    }

    td.col3 {

        width: 50%;

    }

    tr {

        color: white;

    }

    And here's now how it looks like on your form:

    Let us know if you need further assistance.

    Cheers.