How can I split a configurable list into two rows?

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!

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.

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.

looks awesome!! thank you so much!!

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.

 

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!

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!

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.