IONIC placed the class "click-block click-block-hide" and my content disappears

Question

I'm new to ionic. I have a project that I am running based navigation templates. my problem is when I click on a button to return me to the previous template, the template is loaded blank. and chrome inspector appears this class(click-block click-block-hide). What can I do? and how I can correct?

This template status. This is where that class is added.

.state('tabs.Ranking', {
  url: "/menu/IndicadorEps/RankingEps/:idindicador",
  cache:false,
  views: {
    'tab': {
      templateUrl: "templates/ranking.html",
      controller: 'RankingAppController'
    }
  }
})

Are your CSS and JS versions both up to date? May be an issue where the JS is applying those classes, but the styles are from an older version of ionic, causing rendering issues. — SteamDev, Jan 22 '16 at 16:39
@SteamDev would think so. but I do not think they have to do with my problem. — , Jan 22 '16 at 16:49
@user5115790 did you manage to find out what the issue was? I am running into the same... (and I have just upgraded both JS and CSS to the latest release) — Joni, Mar 11 '16 at 18:18

score 4 · Answer 1 · answered May 23 '16 at 19:03

As suggested in previous comments I had updated to the latest Ionic, even created a new project from a template and still had this issue.

I "solved" it by preventing Ionic to create the click-block div in the first place, which is good enough for my purposes. To do this I just overrode the factory to basically do nothing:

/* override Ionic module to eliminate ionic bug with click-block after modal */
angular.module('ionic').factory('$ionicClickBlock', [
  '$document',
  '$ionicBody',
  '$timeout',
function($document, $ionicBody, $timeout) {
  return {
    show: function(autoExpire) {
      //console.log('custom $ionicClickBlock');
    },
    hide: function() {
      //console.log('custom $ionicClickBlock');
    }
  };
}]);

In that app I had a module called AppConfig (in a file called config.js) which contained that piece of code. My app.js then had that as a module dependency like `var app = angular.module('App', ['AppConfig']);` In the meantime I moved to NativeScript with Angular2. I love it :) — Joni, Jan 12 '17 at 20:25

score 0 · Answer 2 · answered Feb 15 '16 at 12:13

0

I think u can recompile scss and try once https://forum.ionicframework.com/t/beta-14-click-block-overlay/14226

answered Feb 15 '16 at 12:13

Sankar Thanulingam

1
1

score 0 · Answer 3 · answered Oct 30 '17 at 01:26

Another option might be to override the css class with new properties.

Just add to one of your css files that is loaded after the ionic css files, the following css rule.

.click-block-hide {
    position: initial;
}

I don't know what the purpose of this div is in the first place, but I suspect it has something to do with $IonicPopupModal, just so you know, it might break functionality..

IONIC placed the class "click-block click-block-hide" and my content disappears

3 Answers3