Browse Source

Push dropdown up if it's off bottom of screen/site

Use bottom: 100% to make sure the menu does not overlap the
button (as with bottom: 0). If it overlaps the button then
that interferes with the button click handler.
merge-requests/118/merge
Andrew Shu 4 years ago
committed by Deimos
parent
commit
ca38cd67fd
  1. 7
      tildes/scss/modules/_dropdown.scss
  2. 13
      tildes/static/js/behaviors/dropdown-toggle.js

7
tildes/scss/modules/_dropdown.scss

@ -11,6 +11,13 @@
}
}
&.dropdown-bottom {
.menu {
top: auto;
bottom: 100%;
}
}
&-toggle.btn-post-action {
height: auto;
}

13
tildes/static/js/behaviors/dropdown-toggle.js

@ -34,6 +34,19 @@ $.onmount(".dropdown-toggle", function() {
"dropdown-right",
$this.offset().left + $this.width() - $menu.width() > 0
);
// If the menu extends past the bottom of the viewport, or the site footer
// overlaps the menu, push the menu above the button instead.
var menuBottom = $this.offset().top + $this.height() + $menu.height();
var viewportHeight = $(window).height();
var scrollTop = $(document).scrollTop();
var footerTop = $("#site-footer").offset().top;
$this
.parent()
.toggleClass(
"dropdown-bottom",
menuBottom > viewportHeight + scrollTop || menuBottom > footerTop
);
});
$(this).blur(function() {

Loading…
Cancel
Save