Lining up form elements - Post ID 239146

User 2571899 Photo


Registered User
20 posts

I have a form with three rows.

First row contains one element set at width=100%.
Second row contains three elements set at width=33% each.
Third row contains two elements set at width=50% each.

On all three rows the left edge of the left most elements are all aligned perfectly. However the right edge of the the right most elements are not aligned making the form look a little sloppy. Is this a bug or am I not doing something properly.
User 103173 Photo


VP of Software Development
0 posts

That is normal behavior. Alignment is set on left, not justify. You can adjust the Item Padding or use Spacer elements to to make fine tune adjustments.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 38401 Photo


Senior Advisor
10,951 posts

Yeah spacer elements is what you need to take up the rest of the lines. Rememeber that when you set up a line to be 33%, that only means the size of that particular element will be 33% of the line width, it doesn't affect the rest of the line at all so if you are wanting say 3 things to be 50% size and each on their own line you'll need to use spacers to take up the rest of the line or they will end up on the same line for 2 of them and one on the next line.

You can use spacers to help center or position them by putting them on each side of a small element that you want on a line by itself and just adjust the width of the spacer elements and their respective paddings as well as the padding of the main element on that line.

Hope that helps :)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.