ngMessages UI jump when used in combo with ng-show #5298
Comments
|
+1 |
|
Also being affected by this. Edit: I think I jumped the gun on the cause. It seems a little more complicated than that one rule. Still digging into it. Edit 2: This is a deeper rabbit hole than I expected. Gotta bail, sorry! |
|
With the specific bottom border yes, but I have another somehow related issue now which makes a larger jump in the area below the the input field only when I have a condition on the ng-messages, which creates a ~24px height below due to the ng-messages first being display:none; due to ng-hide and that changes after the first validation (when blurring the field) — even if the validation is successful. So it's a part fix for me or something else not directly related to this one but related to ng-messages and recent changes. I've checked if we have anything special going on in our styling, but it does not look like it, it's pretty basic, but the combo with the ng-show on the ng-messages seems to be the reason for this. |
|
I created a simple pen (forked from the input demo) where I added the ng-show on the "first name" field and one error message. As you can see, there's a whole lot of jumping going on there. Didn't use to be like that and I find this to be largely disturbing to a smooth UI. Pen here: http://codepen.io/houmark/pen/zvaWyb/ Also the postal code is jumping around when erroring, but I did not touch that one at all and it acts the same in the demo. |
|
The sliding up and down in your demo is fixed on master (by the commit mentioned above). Demo: http://codepen.io/anon/pen/GpGYeb So as you mentioned, the issue is that This snippet of CSS fixes the issue, but it's very much a workaround, not a solution: md-input-container [ng-messages].ng-hide {
display: block !important;
visibility: hidden;
} |
|
@ngraef Yeah, I had been brewing on something similar, and while it's a workaround, it's not really that bad and has made our forms stable again (read non-jumpy), so thanks for that. Hope to see a more permanent fix soonish :) |
|
here is a demo showing the issue http://codepen.io/oste/pen/ZbMVLj It should be noted that updating this code to RC2 causes the message to jump around even more. I can't provide a demo b/c RC2 is not available via CDN. |
|
+1 |
|
+1 |
|
same issue @houmark |
|
+1 |
topherfangio
added
the
in progress
When the ngMessages directive was used with the ngShow, ngIf and other directives inside of an md-input-container, the messages would flicker and jump rather than properly animating. Additionally, if the messages spanned multiple lines, the animations were incorrect due to hard-coded values. Fix many styles and move animations into JS so we can properly calculate message heights. Also, add more flexibility with the `md-auto-hide` CSS class and associated attribute and update docs/demo accordingly. BREAKING CHANGE By default, the `<md-input-container>` now automatically hides any error messages until the component is in an error state (determined by `md-is-error`). If you wish to achieve the original behavior where messages are always visible, add the `md-auto-hide="false"` attribute to your `ng-messages` or use one of the following visibility directives: - `ng-if` - `ng-show`/`ng-hide` - `ng-switch-when`/`ng-switch-default` Fixes #5298.
When the ngMessages directive was used with the ngShow, ngIf and other directives inside of an md-input-container, the messages would flicker and jump rather than properly animating. Additionally, if the messages spanned multiple lines, the animations were incorrect due to hard-coded values. Fix many styles and move animations into JS so we can properly calculate message heights. Also, add more flexibility with the `md-auto-hide` CSS class and associated attribute and update docs/demo accordingly. BREAKING CHANGE By default, the `<md-input-container>` now automatically hides any error messages until the component is in an error state (determined by `md-is-error`). If you wish to achieve the original behavior where messages are always visible, add the `md-auto-hide="false"` attribute to your `ng-messages` or use one of the following visibility directives: - `ng-if` - `ng-show`/`ng-hide` - `ng-switch-when`/`ng-switch-default` Fixes #5298.
When the ngMessages directive was used with the ngShow, ngIf and other directives inside of an md-input-container, the messages would flicker and jump rather than properly animating. Additionally, if the messages spanned multiple lines, the animations were incorrect due to hard-coded values. Fix many styles and move animations into JS so we can properly calculate message heights. Also, add more flexibility with the `md-auto-hide` CSS class and associated attribute and update docs/demo accordingly. BREAKING CHANGE By default, the `<md-input-container>` now automatically hides any error messages until the component is in an error state (determined by `md-is-error`). If you wish to achieve the original behavior where messages are always visible, add the `md-auto-hide="false"` attribute to your `ng-messages` or use one of the following visibility directives: - `ng-if` - `ng-show`/`ng-hide` - `ng-switch-when`/`ng-switch-default` Fixes #5298.
When the ngMessages directive was used with the ngShow, ngIf and other directives inside of an md-input-container, the messages would flicker and jump rather than properly animating. Additionally, if the messages spanned multiple lines, the animations were incorrect due to hard-coded values. Fix many styles and move animations into JS so we can properly calculate message heights. Also, add more flexibility with the `md-auto-hide` CSS class and associated attribute and update docs/demo accordingly. BREAKING CHANGE By default, the `<md-input-container>` now automatically hides any error messages until the component is in an error state (determined by `md-is-error`). If you wish to achieve the original behavior where messages are always visible, add the `md-auto-hide="false"` attribute to your `ng-messages` or use one of the following visibility directives: - `ng-if` - `ng-show`/`ng-hide` - `ng-switch-when`/`ng-switch-default` Fixes #5298.
When the ngMessages directive was used with the ngShow, ngIf and other directives inside of an md-input-container, the messages would flicker and jump rather than properly animating. Additionally, if the messages spanned multiple lines, the animations were incorrect due to hard-coded values. Fix many styles and move animations into JS so we can properly calculate message heights. Also, add more flexibility with the `md-auto-hide` CSS class and associated attribute and update docs/demo accordingly. BREAKING CHANGE By default, the `<md-input-container>` now automatically hides any error messages until the component is in an error state (determined by `md-is-error`). If you wish to achieve the original behavior where messages are always visible, add the `md-auto-hide="false"` attribute to your `ng-messages` or use one of the following visibility directives: - `ng-if` - `ng-show`/`ng-hide` - `ng-switch-when`/`ng-switch-default` Fixes #5298.
ThomasBurleson
removed
the
in progress
Sometimes it's nice to only show an error message after a field is touched or submitted. So to do that we have used ng-show on the outer ng-messages element like below:
This works fine, but since some of the recent changes related to "multiple" we started seeing a small "UI jump" when leaving the field and the error message was to be shown (or not due to no errors).
To reproduce:
Add the ng-show condition on a field with ng-messages, focus the field, leave the field. The design will now jump just one pixel or so (only the first time).
Not exactly sure what would be the simplest solution, but I thought I would at least report this so someone else might be able to figure out a simple solution.
The text was updated successfully, but these errors were encountered: