CODEWITHSUNDEEP
cssangularjsangular-strap
rnrneverdies
rnrneverdies

Reputation: 15647

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.

Upvotes: 3

Views: 3729

Answers (2)

Mike Wijnen
Mike Wijnen

Reputation: 1

The angular-modal-service adds class "modal-open" to your body tag when a modal page opens. It also adds padding-right: 15px to the body tag.

My solution to this is the following. Add this to your css and the page will not resize anymore during modal-open/modal-close.

body.modal-open {
    padding-right: 0 !important;
}

Upvotes: 0

Shaik Mahaboob Basha
Shaik Mahaboob Basha

Reputation: 1082

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

Upvotes: 8

Related Questions