Qtable, the QInput with "v-slot:error" reserves an empty area for message since V1.0

[s.molinari]

@christian_f - There are the bottom-slots and hide-bottom-space props in QInput. I believe the latter is the one you are looking for.

Scott

[metalsadman]

Yep, though you will lose the animation when error appears.

[s.molinari]

Yeah, better to put bottom-slots on all QInputs, so they are all “equal” and don’t move around, when errors are shown.

Scott

[metalsadman]

Could probably omit the message too since it’s inside a qtable, if linting is enough. @christian_f prolly take a look on the upgrade guide too, seeing your on pre v1 and also https://quasar.dev/vue-components/table#Popup-editing.

[christian_f]

Hi, I tried many solutions and I found I can use “true / false / undefined”.
With “false”, the “bottom-space” is always created and displayed, even if is empty.
With “undefined”, the “bottom-space” is removed => this is what I need!
Thanks
Christian

[s.molinari]

Are you talking about the bottom-slots prop? @christian_f

Scott

[metalsadman]

@christian_f example https://codepen.io/metalsadman/pen/MMvaqO?&editable=true&editors=101

[christian_f]

Hi
I made for you my first “codepen” demonstration.
As I explained at the beginning, the error management is not the same if we compare a QInput alone in a DIV (your example above) with a QInput included in a table cell (my example below).

https://codepen.io/christian_f/pen/rEGYOL?editors=1010

Description of the buttons and events:

• true (default) => the errorMessage DIV is open with a message => of course, the line is not correctly aligned (not a problem)
• false => the errorMessage DIV remains open without a message => the line is not correctly aligned (strange)
• undefined => the errorMessage is removed => the line is correctly aligned

I don’t know if it is an issue or not, I let you decide. I just want to show you the situation so that you understand the subtlety, and possibly report it in the documentation.

For my part, I was able to get the right result and I have a screen that works properly

Regards
Christian

[metalsadman]

@christian_f doesn’t matter whether my example wasn’t in a table, what you’re missing is the prop hide-bottom-space, like what @s-molinari pointed out and it’s there in my example. updated your example using it https://codepen.io/metalsadman/pen/wLrYdm?editors=1010.

[christian_f]

Sorry, I was too focused on the context of the table. Thank you very much for your patience.
Christian