Angularstrap Modal hide browser vertical scrollbar
I am testing an angular strap modal and something unwanted. In a large document, while modal visibility, the browser scroll bar disappears. Then, when you close the modal, the browser scroll bar is displayed again and the document falls off a bit.
I've been looking at developer tools for an hour but I can't seem to find the reason.
It gets annoying when the document crashes.
How can I disable invisible scrollbar?
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
TEST ON Windows 8.1
Chrome 36, Firefox 31, Opera 24 - Same results.
Safari 5.1.7 - Worst results, the overlayer still visible.
source to share
The modal overflow is set to hidden.
You can install body overflow on auto to fix the problem.
ie <body ng-controller="ModalCtrl" style="overflow: auto">
Working demo http://plnkr.co/edit/DGb38NBp89Fl4Jhvvyx3?p=preview
source to share
angular-modal-service adds "modal-open" class to your body tag when modal page is opened. It also adds padding-right: 15px to the body tag.
My solution for this is as follows. Add this to your css and the page won't change anymore during modal open / modal close.
body.modal-open {
padding-right: 0 !important;
}
source to share