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

Question

Question

Small Side-by-Side fields

asked on March 22, 2021

My form has two small fields that display side-by-side. I want these to be the only fields on that line, with white-space filling the rest of the line.

 

The problem is, depending on the screen resolution, the fields from the next line display on the same line.

I've tried adding margins and padding. I've tried inserting a blank HTML field.

I'm just not getting it.

What I really want is a line break to code into the line,  but I'm not getting anywhere with that, either.

 

I'm attaching an image showing my desired formatting, and another showing what I get if I add a margin to the end of the row.

 

Anyone do something similar or have any ideas?

 

desired_formatting.JPG
bad_formatting.JPG
0 0

Answer

SELECTED ANSWER
replied on March 22, 2021

I do this kind of stuff with CSS, and blank Custom HTML Fields.

Give the two fields the Class Name of quarterWidth, and the blank Custom HTML Field the Class Name of halfWidth.  Lay them out in order of field 1, field 2, blank Custom HTML field.

Add this CSS to the form: 

.quarterWidth {display : inline-block; width : 25%;}
.halfWidth {display : inline-block; width : 50%;}

 

These are a percentage of the form width instead of fixed pixels, so resizing your form will retain the 1/4, 1/4, 1/2 positioning of the fields.

0 0
replied on March 22, 2021

That did the trick - thank you so much!!!

1 0

Replies

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

Sign in to reply to this post.