inline-block code running together

asked on March 17, 2022

I have fields that need to be in a row of three (not a table, just fields beside each other). Immediately following this row of three, I have another set of fields that need to be in a row of five.

Using CSS, I configured the first row as an in-line block for each row. It worked.

I added the CSS for the next row, but it would not work. While I was trying to figure out what happened, I removed the code for the first row and suddenly the second row worked.

When I put all the code back in, it won't work.

I figure the first code is running into the second, but I'm not sure how to make it stop. Any Ideas?

FYI... I am slowly learning how to code the forms, but am not an expert by any means.

0 0

replied on March 17, 2022

It's difficult to determine what is going wrong without seeing the code you are using. Would you mind sharing?

Alternately, here's how I would do it.

Using this CSS, add the thirdWidth class to all fields in the row where you want 3 items, and add the fifthWidth class to all fields in the row where you want 5 items:

.thirdWidth {display : inline-block; width : 33%;}
.thirdWidth .cf-field {min-width : 80px;}
.fifthWidth {display : inline-block; width : 20%;}
.fifthWidth .cf-field {min-width : 80px;}

0 0

replied on March 28, 2022

I managed to fix it just by using a CSS class, rather the the #q references for the three in a row. I'm not sure why that made a difference, but it did. The rest of my code worked fine with the #q references.

Anyway, got it working. Thanks.

1 0

Question

Question

inline-block code running together

Replies

Sign in to reply to this post.