CSS Horizontal Wrapping Columns Layout

Question

I am trying to achieve a layout in which input fields appear in a column. When the column exceeds the height of its container, it must wrap horizontally.

I have achieved this layout using flexbox, but flexbox (and more specifically the flex-wrap property) isn't widely enough supported. In my case, I need to support modern web browsers and at least IE9+

Additionally, the form content is generated by Ember.js along the lines of this method. The model that is bound to the form changes, which means the number of input fields is dynamic.

How can I achieve this layout more compatibly?

the dreaded `table`, if you can cope with a fixed layout. have you considered the usability of a form layout like this? — TimCodes.NET, Jul 11 '13 at 19:14
Is the number of input fields constant? Do you have access to server side scripting language like PHP? — hungerstar, Jul 11 '13 at 19:28
@Chimoo - The form content is being generated by Ember.js along the lines of [this method](http://stackoverflow.com/q/12415299/2085526), so the form has a dynamic number of fields depending on the model backing it. A fixed layout is probably not an option as far as I can tell. Also, I've been implementing this layout from a mockup, so I've only really given cursory thoughts to its usability. Is there some thought in particular you had about it's usability? — nickiaconis, Jul 11 '13 at 19:38
Normally you wouldn't expect to get to the bottom of a form and then have to go back to the top again. May confuse users to see fields next to each other that don't seem related — TimCodes.NET, Jul 11 '13 at 19:40
@hungerstar - I missed those things in asking the question. The number of input fields is dynamic, and I'll have a Django back-end eventually, but it's Ember.js for the front-end with fixture data for now. — nickiaconis, Jul 11 '13 at 19:47
@Chimoo - I think this layout will be okay for my use-case. All the fields in the form combine to describe one object, so there's no issue with fields being unrelated. The layout is designed to ensure every field is visible, so users should know that there is more to come as they tab through making the non-standard ordering less jarring, but that _is_ something I hadn't thought of. Thanks =) — nickiaconis, Jul 12 '13 at 14:00

score 0 · Answer 1 · edited Jan 14 '16 at 03:12

0

Just updated your Fiddle a little: http://jsfiddle.net/43k5s/6/

.menu-form {
    background-color: lightgray;
    padding: 1em 1.5em;
}

.menu-form:before, .menu-form:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}

.menu-form:after {
    clear: both;
}

.menu-form {
    zoom: 1;
}

.menu-form div {
    width: 33%;
    float: left;
}

.menu-form div label {
    display: block;
}

Using floats and clearfix this should work in all major browsers (even older IE). You might also work with fixed widths or media queries to change the number of columns.

edited Jan 14 '16 at 03:12

Josh Crozier

233,099
56
391
304

answered Jul 11 '13 at 19:41

tosc

759
4
16

Thanks! I can't accept this answer unfortunately as it doesn't achieve the layout referred to in the question (these are horizontal rows instead of vertical columns), but I may ultimately have to use this method with some javascript trickery if I can't find a better solution. – nickiaconis Jul 12 '13 at 14:08
You might count the number of fields (server side or javascript) and place an equal number of them in a div. Then use the obove css to float the divs. Sorry, that's the only thing I can think of to solve this problem right now. – tosc Jul 13 '13 at 03:31

CSS Horizontal Wrapping Columns Layout

1 Answers1