Consider a form with several q-input components, some of which have rules and/or hints, and some of which do not:
<q-input label="One" :rules="[val => !!val || 'required'" />
<q-input label="Two" />
<q-input label="Three" hint="This is some helpful information" />
<q-input label="Four" />
The qInput (and qSelect, etc) component automatically reserve space under inputs with potential error messages or hints, and not for others. This causes an uneven looking layout.
One solution is to add hide-bottom-space to all inputs, but this causes the whole form to move up and down as errors are shown and hidden. Also, the automatic space does actually make for a nice layout, if only it were consistent.
My current workaround is to add hint=" " to every input that wouldn't otherwise get space. But this feels hacky and looks odd to future maintainers (so I end up also putting comments in to explain it, which is even more mess).
I keep wishing there was something like a force-bottom-space prop that always reserves the bottom space no matter what.
Am I missing another way of doing this?
Try adding bottom-slots prop to all inputs, or just the inputs without hints or validation, to still reserve the extra empty space below the input.
bottom-slots: Boolean
Enables bottom slots ('error', 'hint', 'counter')
<q-input label="One" :rules="[val => !!val || 'required'" />
<q-input bottom-slots label="Two" />
<q-input label="Three" hint="This is some helpful information" />
<q-input bottom-slots label="Four" />