Merge pull request #442 from tiwariav/bugfix/3645/modal-show
Bugfix/3645 navbar movement on modal show/hide
This commit is contained in:
		
				commit
				
					
						ab4e7feedd
					
				
			
		
					 1 changed files with 50 additions and 0 deletions
				
			
		| 
						 | 
				
			
			@ -14,3 +14,53 @@ $( 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();
 | 
			
		||||
var paddingAdjusted = false;
 | 
			
		||||
 | 
			
		||||
$( document ).ready(function() {
 | 
			
		||||
    // add proper padding to fixed topnav on modal show
 | 
			
		||||
    $('body').on('click', '[data-toggle=modal]', function(){
 | 
			
		||||
        var $body = $('body');
 | 
			
		||||
        if ($body[0].scrollHeight > $body.height()) {
 | 
			
		||||
            scrollbarWidth = getScrollbarWidth();
 | 
			
		||||
            var topnavPadding = parseInt($('.navbar-fixed-top.topnav').css('padding-right'));
 | 
			
		||||
            $('.navbar-fixed-top.topnav').css('padding-right', topnavPadding+scrollbarWidth);
 | 
			
		||||
            paddingAdjusted = true;
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // remove added padding on modal hide
 | 
			
		||||
    $('body').on('hidden.bs.modal', function(){
 | 
			
		||||
        if (paddingAdjusted) {
 | 
			
		||||
            var topnavPadding = parseInt($('.navbar-fixed-top.topnav').css('padding-right'));
 | 
			
		||||
            $('.navbar-fixed-top.topnav').css('padding-right', topnavPadding-scrollbarWidth);
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
});
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue