Material-ui: column placement (multiple items per row)

[acornejo]

often you want to place two or more components in the same line.

for instance, you may want to have two input boxes, one for firstname the other for lastname, or perhaps one input box for phone number and next to it a dropdown for type (i.e. mobile, home, work). etc.

there are plenty of such examples in google's material design website, see here:

https://www.google.com/design/spec/components/text-fields.html#text-fields-labels

what solution does material-ui recommend to do this? I tried nesting components using flexbox placement (https://github.com/tcoopman/react-flexbox) however that doesn't work well (components break down).

Also it seems that the components in material-ui have different alignment/margins which prevent them from displaying properly side-by-side. For instance, I was unable to have an input next to a dropdown, since they do not align, the same is true for a dropdown next to a datepicker input, etc.

Is there a recommended way to do this without having visual glitches?

[acornejo]

(bump)

I think issues #2801 and ##2601 are essentially specific examples of what I mention here.

There are probably more issues out there related to this, since placing widgets side by side is a pretty common thing to do.

Does someone have a workaround they want to share? FWIW I tried react-toolbox as an alternative to material-ui and this issue is less prominent there, although of course it has its own collection of issues (one of them being having less widgets than material-ui).

[brundonsmith]

I would really appreciate a response on this; this seems like a pretty common issue people (including myself) will run into

[giorgioongithub]

Hi, I just started evaluating MUI, and quickly got same problem. In my case I need to align a textField and a select field on one row, and on the other row a text field and a multiline text field. In both cases there is a misalignment. I tried to set vertical-alignment: bottom as suggested by [https://github.com/callemall/material-ui/issues/2601] but no solution.
If I have 2 text fields on same row, the are perfectly aligned, as they should.
Thanks for any suggestion.

[brundonsmith]

There are three possible alignments: top, middle, and bottom. The main thing we care about here is just that they're on the same one.

[giorgioongithub]

hi, @brundonsmith ,
thanks, forcing the vertical-align at last solved, but it depend from which components are on the same line.
I had to force vertical-align bottom if there were a Select and a Text, and I had to force vertical-align top for a text and a multiline text.. :(. Not tested different mix...

[mbrookes]

Form layout is being addressed in next.

[Sphinxs]

Updates? Saw this on Stack Over Flow, don't know if it is the unique / best way to do because if I more then two columns things start to mess up