When showing validation messages the individual inputs shift up causing unsightly missalignment

[Bond-Addict]

Vuestic-ui version: 1.9.12

Description

Currently when validation occurs, the messages cause the input that's invalid to be pushed up causing misalignment. Instead it should create space below the inputs such as a new row so the inputs stay inline.

Reproduction

https://ui.vuestic.dev/play#eNrdVE2P0zAQ/StWLgFp0wjKqcoiAdoDSHwIVnDAHNxkmnjxlzx2t6jqf2fsNN1Q0B72xl4S583Mm+c3sffFK+cW2wjFqmiw9dIFhhCie8kNY1I76wPbMw8bdmAbbzUrKbnkJoVbazAwjT27TBlPyvIpN0090hABfQTQTokAma4ZnuU3Y99kGJgSa1AZr4+BZu1ZPa62otpYr4/5BHRyy1olEC950XvZsfSoWquwWrJeuOo5k9QNKwzCB17cVRKVNC4GttK2A/VVqAhEUq6VGEpejDoIuAakuqOAh1SeleKtDO1wVht8hFnl+1+sHaD9ubY7Qqf9CSV7UyGoTdWCCeD/kjUVPYRdh+rFjLCpydrR9HruempDEdnBNJRj/v84mpUGRNFDkvi9TGD545FNrKlnh42b4qIYj2+lhVvcoDV0xPd5jMcA8mLFMpIwOtYYZFtFmWBeDCE4XNV1lOl6SKFFB9t6SrMx1FpIQ8y8SBwHbg7UMyDdChvZn3VsrXZSgf/ogqRb44/OQil7+y5jyY2LCc9G/AO/QfImSfzkAcFvyb9TjH6wHmjgKXz15QPsaH0KkvFRUfY9wc+AVsWkcUx7HU1Hsmd5We3bbKA0/TVe7QIYnDaVx5ncyPnZ1Tf3bP1O7nKxPLl4+A0o7s3r

Although setup in angular is slightly different (uses a validation message for each individual form field) individual validation messages don't cause inputs to shift up

https://codesandbox.io/p/devbox/angular-forms-hjgn5m?file=%2Fpackage.json%3A23%2C1-24%2C1

[m0ksem]

I understand the solution with reserved space for error messages. But, having this confuse when you're using input without any kind of validation (for search fields for example). Plus, we support multiple error messages, so it is impossible to have a size of reserved space.

I'll suggest to control space manually.

https://ui.vuestic.dev/play#eNrVVE1v1DAQ/SuWLwGp2QgKl1WKBKgHkPgQVHDAHLzJbOLiL3nsbdFq/ztjZ7NdFtQD4tJLPt68mXl+k8mWv/R+sUnAl7zFLigfGUJM/oWwjCnjXYhsywKs2Y6tgzOsInIlbA53zmJkBgd2kRmPquqxsG0zlaEC9BLBeC0jlHLt+KTcGfuq4si0XIEueLMPtKvAmulpI+u1C2bPJ6BXG9ZpiXgh+BBUz/Kl7pzG+hkbpK+fMkXdsMYoQxT8LpNKKetTZEvjetBfpE5ARaqVlmMl+KSDgCtAytsL+JfMk1S8UbEbT3JjSHCU+e4n60bofqzcLaHz+Uysn/+hZOb9h4JtQ25OPjfHRuc2FFE9zHPY8x/iNJYGEOUAWeK3KoPV94c/pLY5Wilh+RmflrQ20i+u0Vla5G2Z3D6Agi9ZQTJGy4tRdXVSGRZ8jNHjsmmSyj+BHFr0sGlmmkuxMVJZqix4rrETdkc9I9Lur9Vw0rFzxisN4YOPiv4Nv3WWWrubtwXLbpzNeDHiL/g1kjdZ4scACGFD/h1i9E0NQDPO4cvP7+GWng9BMj5pYt8T/ATodMoaJ9qrZHuSfcQrat8UA5UdrvDyNoLF+VBlnNmNwi+uvr7n6HdyzxfnBxd3vwAMWMNV

[m0ksem]

Faced this issue today.

As a solution, I've added mt-4 to VaButton, so it is correctly aligned with all inputs. The only issue I'd like to fix is to remove margin-bottom from outer label, so label height correctly aligns with Tailwind mt-4.

[Bond-Addict]

So mt-4 should be applied to all of my inputs?

[m0ksem]

So mt-4 should be applied to all of my inputs?

To elements without label.

Here is example

mt-4 is not enough, exactly for 2px margin of label... I think this pattern solves most of the issues.
I manually removed margin in my project:

.va-input-wrapper__label--outer {
  margin-bottom: 0;
}

[Bond-Addict]

I would venture to say its more common for inputs to have a label whether inside or out of the field. Do you have a recommendation for using a label? I think this is a common usecase. Would it not make sense to have a global style by default or a built in vuestic config value that could be used?

[m0ksem]

I'll remove extra margin in future versions.

You can set globally inner-label props now via global config.

I don't have any recommendations, at least for now.

[Bond-Addict]

@m0ksem hey there! I haven't been using the library super recently. Just curious if this was implemented yet 🙂