ngShow/ngHide breaks css layout - ng-hide-remove overrides css display.

[Thinkscape]

When using ng-show or ng-hide, recent versions of angular (after 1.2.12) are now adding ng-hide-remove ng-hide-remove-active and similar classes.

In CSS we read:

.ng-hide-add-active, .ng-hide-remove {
  display: block!important;
}

After upgrading to 1.2.21 this directive started to break my app's layout, because some elements use display: inline-block, display: table-cell etc. which gets overridden after showing the element.

---

Workaround:

With Angular 1.2, add the following to your css - it'll fix the bug, but will break IE8 (no change needed for 1.3 though) (Thanks @matsko )

.ng-hide-add-active, .ng-hide-remove {
  display: inherit !important;
}
.ng-hide:not(.ng-animate) {
  display: none !important;
}

[caitp]

@matsko is this a "works as intended" scenario? I'm sure there's a workaround for this but I can't think in CSS right now :(

[matsko]

@Thinkscape this is fixed in 1.3: 1d90744, but the fix can't work with 1.2 since we're supporting IE8 in the older 1.2 version (IE8 doesn't have the :not selector).

If you're happy to use 1.3 then upgrade to that.

Otherwise If you don't want to update to 1.3, but you're happy with the CSS code in 1.3's configuration then place the same CSS code at the top of your index.html file in your application (or inside your website's stylesheet code). You can also target IE8 in a different way and provide different CSS code for it.

Regarding 1.2, there's nothing we can do for it at the moment.

[Thinkscape]

@matsko thanks, makes sense.

---

tl;dr

With Angular 1.2, add the following to your css - it'll fix the bug, but will break IE8 (no change needed for 1.3 though).

.ng-hide-add-active, .ng-hide-remove {
  display: inherit !important;
}
.ng-hide:not(.ng-animate) {
  display: none !important;
}

[matsko]

You may also want to place styles to negate the styles present in the 1.2 code:

.ng-hide-add-active, .ng-hide-remove {
  display: inherit !important;
}
.ng-hide:not(.ng-animate) {
  display: none !important;
}

[Thinkscape]

thx. I'll try to test it today.