ui.input changes height when validation fails (version >= 1.4.11)

[akai-1024]

Question

ui.input
when I use it with validation, it raised the card height. It won't recover. It was correct in the early version.

def validate_datetime_format(date_str):
    pattern = r'^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$'
    match = re.match(pattern, date_str)
    state = True if match else False
    return state


validate_dict = {
    'Datetime format error.': lambda s: validate_datetime_format(s)
}

with ui.column().classes('w-full'):
    with ui.card().classes('w-full'), ui.row().classes('w-full items-center'):
        ui.input(label="Start Datetime", placeholder=self.dt_format, value=self.dt_start, validation=validate_dict).props('dense')
        ui.input(label="End Datetime", placeholder=self.dt_format,value=self.dt_end, validation=validate_dict).props('dense')
        ui.button(text='Query', on_click=self.__on_btn_query_clicked).props('dense color=blue')

ui.card
the props("align=right") It didn't work. It was correct in the early version.

    with ui.card().tight().classes('absolute-center items-center'):
        with ui.card_section().classes('bg-blue-9 text-white'):
            ui.label(title).classes('text-h5')

        with ui.card_section().classes('w-full'):
            username = ui.input(label='UserName').props('color=blue-9')
            password = ui.input(label="Password", password=True, password_toggle_button=True)\
                .on('keydown.enter', try_login).props('color=blue-9')

        with ui.card_section().props("align=right"):
            ui.button('Log in', on_click=try_login).props('color=blue-9')

[falkoschindler]

Hi @akai-1024,

I reproduced the problem with the following minimal example:

with ui.row().classes('items-center'):
    ui.input('Start', value='0', validation={'Required': bool})
    ui.input('End', value='100', validation={'Required': bool})

But it also occurs with NiceGUI 1.4.10, so I'm not sure if the behavior really changed.

It boils down to the question, why the size of the input element changes when an error occurs:

ui.input(validation={'Required': bool}).classes('bg-blue-100')

In contrast, a plain Quasar input is already initialized with enough height for the error message:

<q-input :rules="[val => !!val || 'Required']" style="background-color: aliceblue"></q-input>

[akai-1024]

Hi, @falkoschindler

Thanks for your reply.
I used the 1.4.9 version of the code, and both components execute correctly.
When I skipped 1.4.10 and went straight to 1.4.11, I noticed the issues.

And I checked the element, the two input elements are slightly different.

I hope it helps.

[falkoschindler]

Thanks, @akai-1024!

I think we can fix it by adding

self._props['error'] = False

in ValidationElement.__init__. This will always reserve the bottom space, even if no validation is used. Since this breaks the current layout, we should postpone this fix for the next major release.

As a workaround you can this line to immediately add the bottom space to your input:

input._props['error'] = False

[falkoschindler]

See PR #2492.