When I try to validate field that use animated label, the layout broken.

How to fix it?

Looks to me like the CSS for the animated label and the CSS for validation errors are conflicting.

You may need to override/customize the specific styles that are being applied by the base theme, such as: 

.layout .Form .input.Not_Valid,
.layout .Form .select.Not_Valid {
    border: var(--border-size-s) solid var(--color-error);
    padding: var(--space-none) var(--space-base);
    background-color: var(--color-neutral-0);
}

to better match your expectations.

Solution

After doing some testing, it looks like the main thing affecting the layout is this rule:

SyntaxEditor Code Snippet

.animated-label-input .input {
    height: auto;
    padding: var(--space-m) var(--space-base) var(--space-s) var(--space-base);
}

and specifically the height rule.

By adding the following to the app style sheet:

SyntaxEditor Code Snippet

.animated-label-input .input {
    height: 40px;
}

I was able to eliminate the weird formatting when there was a validation error.

Can you try that and see if it helps?

Solution

G. Andrew Duthie wrote:

After doing some testing, it looks like the main thing affecting the layout is this rule:

SyntaxEditor Code Snippet

.animated-label-input .input {
    height: auto;
    padding: var(--space-m) var(--space-base) var(--space-s) var(--space-base);
}

and specifically the height rule.

By adding the following to the app style sheet:

SyntaxEditor Code Snippet

.animated-label-input .input {
    height: 40px;
}

I was able to eliminate the weird formatting when there was a validation error.

Can you try that and see if it helps?

Thank´s


It worked!