App name validation message overlaps character counter

[digitalfishpond]

Validation message for wrong pattern on Deploy --> Specify app details below --> App name overlaps the character counter

Steps to reproduce

• Deploy
• select "Specify app details below"
• In App name field, type a string with illegal characters (capitals, underscores, etc)
• focus out

Observed result

Message overlaps character counter

Expected result

Character counter should be separate from message

[bryk]

Hmm... Isnt this an angular material bug? The demo on material site works as expected: https://material.angularjs.org/latest/demo/input

[floreks]

This is our bug because ng-messages are surrounded with div: https://github.com/kubernetes/dashboard/blob/master/src/app/frontend/deploy/deployfromsettings.html#L26

Height is changed and that's why text is overlapping counter. Deleting div fixes problem.

[digitalfishpond]

Ah. deleting div also causes jittering on a number of events... I wonder if it would be possible to assign a flex value (like '80') to the div? or put a div around the counter too?

[bryk]

deleting div also causes jittering on a number of events..

Can you explain this?

[digitalfishpond]

If I remember correctly, the div was added to avoid the rest of the form jumping up and down (in Firefox at least) upon focus and upon showing error message.