Hi
Are there solutions / examples that use 2 column designs with flex-box?
I saw floats are used which are a bit rusty. Did someone by any chance lay the ground work for a flex version?
or - is there a reason floats are used and flex box should not be used?
Hey Lukas,
I definitely prefer to use the flex-box display for forms, I think it's much cleaner and more dynamic to set it up that way. I generally don't mess around with reordering the fields to stay away from the tab order issue Sanford mentioned, maybe better to do that with some script that actually changes the order of the elements in the document.
Here's a bit of code I use that might serve as a primer to get you started...
form.mktoForm {
flex-direction: column; /* use 'flex-direction: row;' for horizontal display */
width: 100% !important; /* override fixed width on mktoForm */
box-sizing: border-box;
}
form.mktoForm * {
float: none !important; /* remove float on mktoForm elements */
width: auto !important; /* remove fixed width on mktoForm elements */
}
form.mktoForm, form.mktoForm .mktoFormRow, form.mktoForm .mktoFieldWrap, form.mktoForm .mktoButtonRow {
display:flex !important; /* flex these elements */
}
form.mktoForm .mktoOffset, form.mktoForm .mktoGutter, form.mktoForm fieldset legend, form.mktoForm .mktoAsterix {
display:none !important; /* hide these elements */
}
form.mktoForm .mktoFormCol, form.mktoForm .mktoHtmlText {
-ms-flex-positive: 1;
flex-grow: 1; /* make these elements flex to full-width (100%) */
}
/* ROWS ___________________ */
form.mktoForm .mktoFormRow,
form.mktoForm .mktoButtonRow {
flex-wrap: wrap;
flex-direction:row;
min-width:unset;
}
form.mktoForm .mktoFormRow {
margin: 0 -10px; /* offset .mktoFieldWrap padding (10px) */
}
/* COLUMNS ______________ */
form.mktoForm .mktoFormCol {
flex-basis: 0; /* make columns in a row equal widths */
min-height: 0px !important; /*mktoOverride*/
}
/* FIELDSET _________ */
form.mktoForm fieldset {
padding: 0px 10px !important; /*mktoOverride*/
margin: 0px !important; /*mktoOverride*/
border: 0px !important; /*mktoOverride*/
}
/* FIELDWRAP ______________ */
form.mktoForm .mktoFieldWrap {
padding: 0px 10px !important;
}
Basically, the form gets displayed as a flex-column so it orients vertically down the page. The form rows are displayed as flex-rows so they orient horizontally across the page. Inside the form rows (.mktoFormRow) are form columns which will are set to flex-grow so they behave as equal columns.
This is probably my favorite part about using the flex-box display rather than floats, because you can easily drag-n-drop fields into rows in the form editor and it automatically flexes the columns with no fuss. Another subtle advantage of this approach is being able to switch the form display from 'flex-direction: column;' to 'flex-direction: row;' when you want to make one of those horizontally-oriented forms for something like a newsletter sign up (email field + button on one line).
Beyond what's here, you'll want to tack on some CSS for the inputs and mobile (display stuff as block instead of flex so that it stacks on mobile).
Let me know if you've got any questions or if you run into any issues along the way. I'd be happy to help troubleshoot or drop in a few more lines of code if you can share an example of what you're working on.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.