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

[christian_f]

Hi
I migrate from 0.17 to 1.0.0-rc.7. I have good surprises in general.
In previous version, I used QField to manage the QInput error message, inside a QTable row. When the “error” was fired, a div was dynamically added under the input field. It was very good, all the fields of the row are aligned, despite they manage or not the error message (as long as there is no error, and it is the case in general).
With 1.0, I change from QField to the v-slot:error of QInput. The error message management is good, but the div to display the error message is always built when the error attribute is defined (even if the value is false). As I have some other fields without error management on the line, the line is not aligned.

If the QInput is used alone in a page, the error-message div is always built and find his place on the bottom padding of the field.

Do you have any idea how to prevent the error message div being built when it is empty on QTable?

Best regards.
Christian

[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