Question

CSS Help - Change Field Input Length for Inline Fields

Forms

Updated August 18, 2020

asked on August 17, 2020

Hello, I'm a little green when it comes to CSS so need a little help from the community on this one. I have a collection in my form that has several fields in it and I would like 3 fields to be displayed on the same line. However, I would like one field to be about 45% of the line, the middle one to be 35%, and the last one to be 20% but no matter what I try, it seems like the best I can do is set the .cf-field length to match my ratios but the input fields won't cooperate (.cf-large, .cf-large).

I tried creating a new class and set the inline block display without a width ratio. Then I specify each .cf-field to the ratio I want and I do the same with the input boxes (.cf-large.....I also tried .cf-xlarge but made no difference).

It SEEMS like the field container sizes are the correct ratio (or at the very least are able to be manipulated) but the input containers won't cooperate. I've tried adding max-width as well but still nothing. I've also tried specifying pixel widths instead of % and still doesn't seem like anything changes.

I'm thinking this has something to do with the fact that my field labels are top displayed instead of side display but not completely sure about that.

Could someone point me in the right direction please? I know there's something I'm missing but just don't have good grasp on CSS to figure this one out.

Here's a small sample of what I was trying:

.DetailLines {display: inline-block;)

#q91 .cf-field {width: 45%;}

#q91 .cf-large {width: 90%;}

#q96 .cf-field {width: 35%;}

#q96 .cf-large {width: 90%}

#q93 .cf-field {width: 20%;}

#q93 .cf-large {width: 90%}

0 0

Answer

SELECTED ANSWER

replied on August 18, 2020

Oops. The first CSS element, for DetailLines, wasn't closed properly. Accidentally used a parenthesis instead of a curly bracket. Fixing that led to proper spacing:

0 0

Replies

replied on August 17, 2020

Hi Grant-

A few thoughts.

Change the alignment of the label to "above" the field, rather than to the left.
Make the form a bit wider. At the default 800 I had issues with the 3rd field dropping to the next line; making it wider corrected that (maybe a hard-coded padding setting?)
I removed the .cf... from the CSS and just use the #q number. Note that I recommend setting classes for things like "WideField" and "MediumField" so that you don't have to duplicate your work.
Set the field width, from the form layout, to X-Large. That will make the text box take up the full width of the field. Otherwise you'll have to add cf-field or input settings to your CSS.
Getting a specific layout can take a bit of time and effort

0 0

replied on August 18, 2020

Hey Pieter, thanks for the quick response. I didn't know about setting the form width from the settings so that's helpful. I am a little confused with the rest of your solution (or at least judging from your screenshots) because your fields look to be all the same width. PO line might be a little smaller but what I'm looking for is field 1 (PO Branch in your sample) to take up almost 50% of the row/line. The second field would then take up about a third of the row and the last field would be small and just take up roughly a fourth of the line.

Here's a screenshot of what I'm trying to accomplish (this was done with Forms Tables where you can easily specify how big you want each field to be using % numbers.

0 0

SELECTED ANSWER

replied on August 18, 2020

Oops. The first CSS element, for DetailLines, wasn't closed properly. Accidentally used a parenthesis instead of a curly bracket. Fixing that led to proper spacing:

0 0

replied on August 18, 2020

Ok great that's exactly what I'm looking for.

Thank you Pieter!

0 0

You are not allowed to follow up in this post.

Question

Question

CSS Help - Change Field Input Length for Inline Fields

Answer

Replies

Sign in to reply to this post.