adjust padding on fixed .topnav on modal show/hide, to remove the movement
This commit is contained in:
parent
34a95f5a05
commit
7bde3149f5
1 changed files with 40 additions and 0 deletions
|
@ -14,3 +14,43 @@ $( document ).ready(function() {
|
|||
});
|
||||
|
||||
});
|
||||
|
||||
function getScrollbarWidth() {
|
||||
var outer = document.createElement("div");
|
||||
outer.style.visibility = "hidden";
|
||||
outer.style.width = "100px";
|
||||
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
|
||||
|
||||
document.body.appendChild(outer);
|
||||
|
||||
var widthNoScroll = outer.offsetWidth;
|
||||
// force scrollbars
|
||||
outer.style.overflow = "scroll";
|
||||
|
||||
// add innerdiv
|
||||
var inner = document.createElement("div");
|
||||
inner.style.width = "100%";
|
||||
outer.appendChild(inner);
|
||||
|
||||
var widthWithScroll = inner.offsetWidth;
|
||||
|
||||
// remove divs
|
||||
outer.parentNode.removeChild(outer);
|
||||
|
||||
return widthNoScroll - widthWithScroll;
|
||||
}
|
||||
|
||||
// globally stores the width of scrollbar
|
||||
var scrollbarWidth = getScrollbarWidth();
|
||||
|
||||
// add proper padding to fixed topnav on modal show
|
||||
$('body').on('click', '[data-toggle=modal]', function(){
|
||||
var topnavPadding = parseInt($('.navbar-fixed-top.topnav').css('padding-right'));
|
||||
$('.navbar-fixed-top.topnav').css('padding-right', topnavPadding+scrollbarWidth);
|
||||
});
|
||||
|
||||
// remove added padding on modal hide
|
||||
$('body').on('hidden.bs.modal', function(){
|
||||
var topnavPadding = parseInt($('.navbar-fixed-top.topnav').css('padding-right'));
|
||||
$('.navbar-fixed-top.topnav').css('padding-right', topnavPadding-scrollbarWidth);
|
||||
});
|
Loading…
Reference in a new issue