You are viewing limited content. For full access, please sign in.

Question

Question

CSS - fields per line

Forms
Updated June 26, 2019
asked on June 26, 2019

I am trying to have some of my fields displayed with four on a line. The first blank for Race I need to be a little bigger so that it doesn't cut off the text when storing it. I have set it to a large field while the other I have set as a medium field. 

Do I need two css lines for medium and Large? when i change the width it changes all of them instead of just changing the one field that I need large. Is there a way for me to just make that field bigger?

 

0 0

Replies

replied on June 26, 2019

You want to leave .FourPerLine at 25%, but increase the .FourPerLine .cf-large

 

The first one controls the width of the whole container, and the second one controls the width of the cf-field wrapper which is inside that container.

Notice how your "Race" select is actually a tad bigger than the Gender one (85% vs 80%).

 

You could also try .FourPerLine .cf-large select {width: 100%;}

to have the select fill the entire cf-field container

0 0
View 3 previous replies
replied on June 26, 2019

It is still cutting off the line.. I got it to not cut off the race but to do that the other three fields are tiny and pushed way over to the side. 

 

0 0
replied on June 26, 2019

If that isn’t enough, then you’ll need a separate class for that field because 25% is too small.

You’ll need something like FourPerLineLarge and FourPerLineSmall

make the Large one 31% and the Small ones 23%

You can keep adjusting it, you just need

Large + 3*Small <= 100

0 0
replied on June 26, 2019

I thought that is what I had.. I am very new to CSS, so I am very unfamiliar with terms but the second picture shows what I currently have with the two fourperline classes. 

0 0
replied on June 26, 2019 • Show version history

What you actually have is two levels of CSS

.FourPerLine applies to the top-level containers with that class

.FourPerLine .cf-____ applies to the matching child within the matching container

What you need is different sizes for the top-level containers, so you can't use the same .FourPerLine for all four.

With what you have in your screenshot above, the 40% for .FourPerLine is actually being overridden by the 25% because they apply to the same elements.

0 0
replied on June 26, 2019

how would i break this up correctly?

0 0
replied on June 26, 2019

There's a bunch of different ways, one way is to use a different class for the larger field instead of using "FourPerLine" for all of them.

None would have "FourPerLine" anymore

the first field would have "FourPerLineLarge"

and the other three would have "FourPerLineSmall"

Then you can set the values separately.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...