ngHide CSS override doesn't work as documented

[iangreenleaf]

There seems to be a disconnect between the docs for ngHide and how the code behaves (this is present in at least Angular 1.3 and 1.4). According to the docs:

By default, the .ng-hide class will style the element with display: none!important. If you wish to change
the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the .ng-hide
class in CSS:

.ng-hide { … }

However, in practice that CSS override doesn't take effect. It looks like it's losing out to the last clause of this rule, which is being inlined somehow:

[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){
    display:none !important;
}

Here's a simple example that illustrates the problem. We should be overriding the .ng-hide class to show hidden items, but they are still hidden.

I'm not sure if the code needs to move towards the docs, or the docs toward the code. Ideally I'd like to have it work as documented, since overriding the one class rule is easier than overriding the other complicated selectors. But I'm not sure what's going on underneath the hood here, so I don't feel qualified to propose the solution.

[iangreenleaf]

After churning for a couple minutes, my brain realized that an issue I had read earlier (#8485) was relevant, which led me to the commit that introduced this problem, 1d90744.

[lgalfaso]

I think that it is not possible to make it work as currently documented, @matsko?
I would go with changing the docs

[gkalpak]

@iangreenleaf: FWIW, you don't have to override the other styles, just the ng-hide one:

.ng-hide:not(.ng-hide-animate) { ... }

[iangreenleaf]

@gkalpak Thanks, you're correct. That's a reasonably simple override, so I'll submit a pull request to update the docs.