Forum Academy Marketplace Showcase Pricing Features

[SOLVED] Boxes too far apart when breaking to new line

I’ve got this set of elements all on the same line when the page is wide.

As the page width decreases, each element (manual calls them “boxes”) breaks to the next line.

The thing is the “next line” is really far apart. How can I get the lines to be closer together (vertically) so that the inputs don’t take up so much vertical space?

The explanation hints that button “log it” is that far down because of button “new”. But it’s obviously not relative. So maybe it’s putting as much space above button “log it” as button “new” has between itself and the top of the page?

Yup, that’s how it works. When I group everything they wrap tightly together and button “log it” has 0 vertical margin, because button “new” has 0 vertical margin between itself and the top of the group it’s in.

So when “boxes” wrap down to a new “line” the vertical distance between lines is the same as the vertical distance between the left-most “box” and the top of the container it’s in.

By grouping elements and controlling the margin between the top of their group and the left-most element in side that group, I was able to make this line collapse in a sensible way. I had to give the date-time picker the ability to shrink width to 90%, rather than be fixed width, to get it to stop compressing the date input. Anywho, this works well enough. You can see the red boxes around grouped elements.

1 Like