Search code examples
cssangularjsangular-strap

Angularstrap Modal hides the vertical browser scrollbar

I'm testing modal window of angular strap and something unwanted happens. In a large document while the modal is visible the browser scrollbar disappears. Then, when you close the modal, the browser scrollbar is displayed again and the document collapses a bit.

I was looking at the developer tools by an hour, but I can not find the cause.

It's annoying when the document collapses.

How I can prevent that scrollbar be invisible?

HTML

<button data-animation="am-fade-and-scale" bs-modal="modal">
  Open Modal
</button>

Controller

var app = angular.module('Test', ['ngAnimate', 'mgcrea.ngStrap']);

app.controller('ModalCtrl', 
  function($scope){
    $scope.modal = {
      "title" : "ModalTitle",
      "content" : "Modal content"
    };
})

http://plnkr.co/edit/yKZSnn?p=preview

TESTED ON Windows 8.1

      Chrome 36, Firefox 31, Opera 24 - Same results.
      Safari 5.1.7 - Worst results, the overlayer still visible.
Solution

  • For modal the overflow is set to hidden.

    You can set the overflow of body to auto to fix up the problem.

    i.e <body ng-controller="ModalCtrl" style="overflow: auto">

    Working Demo at http://plnkr.co/edit/DGb38NBp89Fl4Jhvvyx3?p=preview