Custom CSS in Configurable List is extending tr or td, new record button too far down

Hi,

Using the various tutorials I was able to edit the CSS in my configurable list widget to support multiple rows.  However it has created a lot of empty space in either the tr or td tag (I can't tell which) and it's pushing the + (labeled "Add Plan") button too far down.

The form URL is https://form.jotform.com/62716083960156, screen shot below, any help appreciated!

I checked your form https://www.jotform.com/62716083960156 and I seeat this time that the CSS code had messed up the widget layout.

Let me check how it can be fix. I'll get back to this once I have update.

Morning, any feedback on this?

We will check this now and get back to you with updates. Stay tuned!

Replace your CSS codes with this:

http://pastebin.com/raw/kHnAQLCa

It should give you the following format:

Hope this helps!

By the way, if the first CSS codes do not provide you that result, please use this instead.

http://pastebin.com/raw/FX43UCPE

I think this one works better for your form.

Hi Elton!

Unfortunately neither solution looks anything like your screen shot, here is what I'm getting.

Hi,

We apologize for the delays. I fixed it on your form https://www.jotform.us/form/62716083960156 using the CSS codes provided by our colleague EltonCris.

Can you please check again. Let us know if still different.

Thanks.

Thank you!  I realize now that it was working, I had my browser zoom setting dialed up, sorry for the error!

I'm very sorry.  I realized the need to add an additional field at the beginning of the form.  I've tried using the methods to reposition the remaining fields but it's throwing everything off again.

Same form, I just added the new text field as Column 1, which pushed everything else out one column.  Could someone help?  Thanks!

Please do not worry, it won't be hard to adjust the CSS code of our colleague. I see that you have already added your own field labels for the new fields by editing this part:

[...]

.col1:before{content:"Enter a description"}
.col2:before{content:"Start Date"}
.col3:before{content:"End Date"}

[...]

Now, to ensure that the line will break at the exact field you want it to, such as if you want the text "EMPLOYEE contribution" to always break onto a new row, we would change the CSS for this exact field. This field is the 8th one on the form, so its code would be:

.col8{clear:left;}

This would cause field 8 to start on a new line again. We can use the same approach for placing "Optional, employer cost" on a new row. Since it is the 13th field, we would use the following code:

.col13{clear:left;}

If you need further assistance, please let us know.

Boris, thank you so much that makes this MUCH easier!

On behalf of my colleague, you are welcome.

Feel free to contact us, if you have any other question.