In the midst of my project on Github Pages, I encountered an interesting issue involving replacing a bootstrap .dropdown with .dropup when the div's overflow-y: scroll causes the dropdown menu to be cut off or overflow. The functionality can be viewed in action at this demonstration. Pay special attention to how clicking the ellipsis icon on the top rows results in a dropdown, while clicking it on the bottom rows triggers a drop up.
In my current implementation (Github page), the code remains identical (as shown below). However, there seems to be an issue where it replaces all instances of .dropdown classes with .dropup upon opening, including the top row which is cut off as depicted in the image below.
https://i.sstatic.net/Cq7MB.png
This problem has been persisting for about a week, and I haven't been able to find a solution. I've attempted various approaches that seemed promising but ultimately turned out to be ineffective hacks or didn't work properly on mobile devices, leaving me frantically searching for a viable fix.
Below is the Javascript / jQuery code I'm employing, accessible through the jsfiddle and my Github source here.
$(document).on("shown.bs.dropdown", ".dropdown", function () {
// calculate the required sizes, spaces
var $ul = $(this).children(".dropdown-menu");
var $button = $(this).children(".song-menu");
var ulOffset = $ul.offset();
// how much space would be left on the top if the dropdown opened that direction
var spaceUp = (ulOffset.top - $button.height() - $ul.height()) - $('#playlist').scrollTop();
// how much space is left at the bottom
var spaceDown = $('#playlist').scrollTop() + $('#playlist').height() - ((ulOffset.top + 10) + $ul.height());
// switch to dropup only if there is no space at the bottom AND there is space at the top, or there isn't either but it would be still better fit
if (spaceDown < 0 && (spaceUp >= 0 || spaceUp > spaceDown))
$(this).addClass("dropup");
}).on("hidden.bs.dropdown", ".dropdown", function() {
// always reset after close
$(this).removeClass("dropup");
});
Edit:
To avoid any confusion, consider this example without my added .dropup feature. jsfiddle. Notice the need for scrolling when clicking the last menu item opens the menu. In such cases, my objective is to eliminate the .dropdown class and replace it with .dropup to ensure seamless menu interaction without requiring scrolling.