Ionic bind class or variable to dynamically created scroll DIV wrapper

27 Views Asked by At

I have a situation where I need to apply CSS styles to various elements but have found in a few particular cases that Ionic is wrapping my native HTML with its own <DIV> for scrolling purposes and I need to then also apply CSS to that wrapper DIV. I have a hidden viewer that needs to display when the user clicks a button. Is there an angularJS way of applying CSS to the SCROLL div wrapper:

Example - my HTML:

<ion-content id="PageNumber1">
   <div id="pageNumber1_header" style="background:white;">
   </div>
   <div id="pageNumber1_content" style="background:white">
   </div>
    <div id="pageNumber1_pageViewer" style="display:none;position:fixed;top:250px; height:500px;">
    </div>

What actually renders is:

<ion-content id="PageNumber1">
  <div class="scroll">   <-- ionic is adding this
    <div id="pageNumber1_header" style="background:white;">
    </div>
    <div id="pageNumber1_content" style="background:white;">
    </div>
    <div id="pageNumber1_pageViewer" style="display:none;position:fixed;top:250px; height:500px;">
    </div>
  </div>
</ion-content>

Currently I am getting the viewer to show with the following...HOWEVER, it doesn't render every time. It works 98% of the time. On occasion I don't see the DOM getting updated with the new CSS settings and as a result the viewer does not become visible. It probably has something to do with the $digest causing the DOM to not get updated. But for those few times, its causing the viewer not to appear which to the user makes it look like the app is broken/not working.

$scope.showViewer = function(x) {
  var h = angular.element('#'+'pageNumber1_header')[0] ;
  var c = angular.element('#'+'pageNumber1_content')[0] ;
  var v = angular.element('#'+'pageNumber1_pageViewer')[0] ;
  var p = h.parentNode ;  // = inoic SCROLL div

  if (x == 0) {
    // Hide Viewer
    h.style.background = "white" ;
    c.style.banckground = "white" ;
    v.style.display = "none" ;
    p.style.height = "0px" ;
  } else if (x == 1) {
    // Show viewer
    h.style.background = "none transparent" ;
    c.style.banckground = "none transparent" ;
    v.style.display = "" ;
    p.style.height = "100%" ;
  }
}

What I would like to do is something like the following as this will force the DOM to be refreshed by the $digest:

<ion-content id="PageNumber1">
  <div class="scroll">   <-- ionic is adding this
    <div id="pageNumber1_header" style="background:{{obj.headerColor}};">
    </div>
    <div id="pageNumber1_content" style="background:{{obj.contentColor}};">
    </div>
    <div id="pageNumber1_pageViewer" style="display:{{obj.viewerDisplay}};position:fixed; top:250px; height:500px;">
    </div>
  </div>
</ion-content>

Then in a function in my controller do a function like this....but using this type of method I can't figure out how to apply CSS to the parent SCROLL div. Because the SCROLL div is being added dynamically by Ionic I can't any native CSS or variable binding via {{obj.ionicSCroll}} to the DIV.

$scope.showViewer = function(x) {
  if (x == 0) {
    // Hide Viewer
    $scope.obj.headerColor = "white" ;
    $scope.obj.contentColor = "white" ;
    $scope.obj.viewerDisplay = "none" ;
    //$scope.obj.ionicScrollHeight = "0px" ;  // I need to apply this to the scroll DIV
    $scope.obj.ionicScrollClass = "viewerHeight0" ;  // how do I bind this class to the scroll DIV

  } else if (x == 1) {
    // Show viewer
    $scope.obj.headerColor = "none transparent" ;
    $scope.obj.contentColor = "none transparent" ;
    $scope.obj.viewerDisplay = "" ;
    //$scope.obj.ionicScrollHeight = "100%" ;  // I need to apply this to the scroll DIV
    $scope.obj.ionicScrollClass = "viewerHeight100" ;  // how do I bind this class to the scroll DIV
  }
}

CSS:

.viewerHeight0 {
  height: 0px ;
}
.viewerHieght100 {
  height: 100%;
}

How can I do this? Or overall, what is another method without using getElementById or angluar.element. I am trying to avoid using these because regular DOM manipulation (in AngularJS app) is already the source of the problem. OR...or is it even possible?

0

There are 0 best solutions below