Beta 14 ng-hide/show

ionic-v1
1

In the new version of beta 14. I get my elements which were previously hidden in a view with ng-hide/show. Now show when navigating. Then will be hidden after the view is finally loaded.

It is the weirdest thing. All views I have do this. Regardless of how i use ng-hide-show.

Any help would be appreciated.

2 Likes
2

Give ng-if a try, instead of hiding or show the element, it will remove the entirely

1 Like
3

That did the trick! Thanks a bunch!

4

This is a bug in Ionic beta 14. Using ng-if will hide the problem, but it’s something the Ionic team should fix.

5

jough is right. ng-if has a different use, it removes elements from the DOM while ng-show or ng-hide make them display: none which is useful thing very often. This cannot be masked with ng-if if used intentionally.

6

We did upgrade to angular 1.3, which would be the only reason why ng-show/hide would be having issues.

Can you guys provide a codepen illustrating these issues?

7

So the main issue @ioudas was having with ng-show/hide was do to their animation hooks

http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations

So a good example is the app intro

Since it’s hiding/showing the buttons in the header depending on the slide index, you can see the issue.

So to resolve this, you’ll just need to add this

.element.ng-hide{
  display:none;
}
8

After switching to beta 14 I also had issues with my views that used ng-show looking really bad when first loading. I was able to switch almost all of the ng-shows over to ng-if and that fixed the issues. One gotcha - I had ng-show directives on ion-content tags, and that threw errors when trying to replace them with ng-if. I had to wrap the ion-content tags with a div and put the ng-if on that, and then it worked.

1 Like
9

Adding this fixed it for me:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}
8 Likes
10

Last CSS almost did the trick for me but it doesn’t work well (div size not calculated) with card class when you make it appear and disappear multiple time with ng-hide updates.

What I made to make it working

.padding_this{
padding-bottom:300px;
}

This one just “push” down the other div out of the seen screen, adapt size to fit your needs.

<div class="padding_this text-center" ng-hide="chargement != 1" style="{{remove_padding}}">

Then I just put a scope variable to apply a style once DOM is fully loaded.

$ionicPlatform.ready(function()
{
 $scope.remove_padding = "padding-bottom:0px !important;";
...

And when the platform is ready I apply the style to override the padding-bottom.

Works like a charm but it’s such a hack… hope it will get fixed anyway :wink:

12

Thanks. Works perfectly for me.

13

I have the same problem. Did anyone try to file an issue on github, as this is really a serious bug IMHO ? (It happened just after upgrading the ionic to beta14 and angular from 1.2 to 1.3)

14

I have an “ion-content” with “ng-show = false”. After running a service dynamically switches to true. Inside has a select, the “change” event does not work correctly on the first try.
However if initially the view has “ng-show = true”, it works correctly.

Any solution possible to start with false?

Version: ionic-nightly-1154

15

Just an update on this: It is still an issue in RC1.0.03 - the CSS snippet fixes it

16

We are upgrading our app from beta 12 to 1.0.0 and we had this issue only on iOS.

The css fix from @CBR seems to work, but why is it required? Can anyone find the angular issue for this?

17

This fixed it for me as well.

18

@CBR may I ask you on which component you used it? It doesn’t work for me neither on div or button :confused:

19

You should not add the classes anywhere. AngularJS applies them automatically when a page transition occurs.

With Ionic 1.1 I had to update to a newer AngularJS version (1.4.6) and the latest Angular UI Router. Otherwise it would not work.