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…
	
	Add table
		Add a link
		
	
		Reference in a new issue