I encountered an issue with a table having a drop-down menu that was getting cut off when opened on the last line. After some experimentation, I came up with a solution to detach the drop-down menu from its parent element and then reposition it by setting the top and right values.
However, I am struggling to determine how to calculate the correct position for the drop-down menu to open just below the button that activated it.
If you want to see an example, check out this JSFiddle link.
(function() {
var dropdownMenu;
console.log($(window).width());
$(window).on('show.bs.dropdown', function(e) {
dropdownMenu = $(e.target).find('.dropdown-menu');
$('body').append(dropdownMenu.detach());
dropdownMenu.css('display', 'block');
dropdownMenu.css('position', 'fixed');
dropdownMenu.css('top', '440px');
dropdownMenu.css('right', '100px')
});
$(window).on('hide.bs.dropdown', function(e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
})();
Note: The values of 440px and 100px should be dynamically calculated based on the position of the button that triggered the drop-down.