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
				
			
		|  | @ -13,4 +13,54 @@ $( document ).ready(function() { | |||
|         }, 1000); | ||||
|     }); | ||||
| 
 | ||||
| }); | ||||
| 
 | ||||
| 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