ng-scrollbar inside angular modal

Question

I'm having trouble in implementing ng-scrollbar inside angular modal . If I use ng-scrollbar in a normal html page ,then it works fine. However , if use it inside andgular modal window, its doesn't work . I'm using a separate html template to load the modal template .

  $scope.searchModal = function() {
$scope.opts = {
  keyboard: true,
  templateUrl : '/app/view/modal/search_content.html',
  controller : SignUpModalICtrl,
   backdrop: 'static',  //to make the backdrop static
  resolve: {} // empty storage
  };   
  $scope.opts.resolve.item = function() {
      return ({name:$scope.name}); // pass name to Dialog
  }
    var modalInstance = $modal.open($scope.opts); 
    modalInstance.result.then(function(){
    },function(){
      //on cancel button press
    });

}

search_content.html

 <div class="scrollme" ng-scrollbar rebuild-on="rebuild:me">
        <h1>Scroll me down!</h1>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p></p>
    </div>
</div>

There is no scrollbar in the result modal window .

clevertension · Accepted Answer · 2014-08-19 05:01:30Z

1

The root cause of this problem is, scrollbar rebuild:me should be invoked after the modal dialog finish to open, so the ng-scrollbar can caculate the offsetHeight and scrollHeight

//Please add modal dialog opened to SignUpModalICtrl controller

var SignUpModalICtrl = function ($timeout, $scope, $modalInstance) {

$modalInstance.opened.then(function() {
    $timeout(function() {
        $scope.$broadcast('rebuild:me');
    });

});
};

answered Aug 19, 2014 at 5:01

clevertension

7,1274 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Wilson Over a year ago

Yes using the Angular Bootstrap Modal this solution works for me.

Aritrik · Accepted Answer · 2014-05-20 11:05:45Z

0

You can try the following,

<modal-dialog show='myData.modalShown' on-close='logClose()'>
<div class="addinfo-section scrollme" ng-scrollbar rebuild-on="rebuild:me">.....</div>
</modal-dialog>


Inside Controller ::
$scope.myData = {
    modalShown: false
}
$scope.toggleModal = function() {
    $scope.myData.modalShown    = !$scope.myData.modalShown;
    $scope.$broadcast('rebuild:me');
};

answered May 20, 2014 at 11:05

Aritrik

991 gold badge1 silver badge7 bronze badges

Comments

TheRock · Accepted Answer · 2016-03-02 19:34:06Z

0

To add a vertical scrollbar inside the dialog of an ng-dialog you need to simply add the following style to the main div inside the template of your html.

<div ng-controller="testController"
     style="overflow-y: auto; max-height:400px;">

</div>

So if the dialog's height becomes longer than 400px the scrollbar will display.

edited Mar 2, 2016 at 19:34

answered Mar 2, 2016 at 14:04

TheRock

1,5411 gold badge18 silver badges20 bronze badges

Collectives™ on Stack Overflow

ng-scrollbar inside angular modal

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related