Different ng-message size with ng-show and ng-if

[leolozes]

As you can see in this codepen, the ng-message font size varies depending on whether the input is defined with a ng-show or ng-if attribute.

It seems that the ng-message div is only generated with the md-input-message-animation class when ng-show is used.

[gpopovic]

Might be related to my issue, #7477

[houmark]

I've also noticed this issue. Hoping for a quick fix as all our validations are now looking very chunky and large.

[gpopovic]

I'm using this nasty hack..to force it to look as similar to other ng-messages as possible
But this will not fix padding...and animation

md-input-container.md-default-theme .md-input-messages-animation, md-input-container .md-input-messages-animation, md-input-container.md-default-theme .md-input-message-animation, md-input-container .md-input-message-animation {
    font-size: 12px;
}

[houmark]

@gpopovic yes, but you'll also need the line-height and the animation CSS to make it the same as intended. Hopefully this can be added so it's the same for both ng-if and ng-show.

[topherfangio]

We're reworking a few things with the input/message animations and I have a note to fix this exact issue (it's causing some other problems as well). We'll try to get this fixed soon.

[leolozes]

As you can see in this codepen, when using ng-messages with md-autocomplete, the font size is also wrong, no matter if you use ng-show or ng-if. You can also see it in the autocomplete demo.