How to align labels


I have created my own set of renderers.
My form now looks like this:


I would like to align the input boxes but without having to set a fixed width for the labels.
I can imagine that some of you did have the same problem. How did you solve this?


Hi @cornelos,

good question!

In our off the shelf renderer sets we avoid rendering labels next to their inputs, however one could easily use Material UI’s grid system or some pure CSS solution (e.g. flex, grid or some hard coded widths) to align them.

In our JSON Forms based property view we use the React Vanilla renderers and actually render labels next to their inputs. We use tables for this, see here. I would not recommend this approach for generic data, but there only flat data is expected, making it a viable solution.

Thanks @sdirix ,

I managed to get the alignment right using CSS with
display: table / display: table-row / display: table-cell