Created
September 25, 2017 07:51
-
-
Save vikrantnegi/f91cc3e185a2e9410c5592d2b888b8f5 to your computer and use it in GitHub Desktop.
Bootstrap dropdown list position (Up/Bottom) based on document height
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function determineDropDirection(){ | |
$(".dropdown-menu").each( function(){ | |
// Invisibly expand the dropdown menu so its true height can be calculated | |
$(this).css({ | |
visibility: "hidden", | |
display: "block" | |
}); | |
// Necessary to remove class each time so we don't unwantedly use dropup's offset top | |
$(this).parent().removeClass("dropup"); | |
// Determine whether bottom of menu will be below window at current scroll position | |
if ($(this).offset().top + $(this).outerHeight() > $(window).innerHeight() + $(window).scrollTop()){ | |
$(this).parent().addClass("dropup"); | |
} | |
// Return dropdown menu to fully hidden state | |
$(this).removeAttr("style"); | |
}); | |
} | |
determineDropDirection(); | |
$(window).scroll(determineDropDirection); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment