From 1f4e03d1fa33a03f54da862ffd4e5a03c9021e33 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Fri, 20 Nov 2015 12:34:49 +1030 Subject: [PATCH] Make sure dropdowns stay within the viewport horizontally too --- js/lib/components/Dropdown.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/js/lib/components/Dropdown.js b/js/lib/components/Dropdown.js index fcc6cb537..ac45424cc 100644 --- a/js/lib/components/Dropdown.js +++ b/js/lib/components/Dropdown.js @@ -47,13 +47,18 @@ export default class Dropdown extends Component { // bottom of the viewport. If it does, we will apply class to make it show // above the toggle button instead of below it. this.$().on('shown.bs.dropdown', () => { - const $menu = this.$('.Dropdown-menu').removeClass('Dropdown-menu--top'); + const $menu = this.$('.Dropdown-menu').removeClass('Dropdown-menu--top Dropdown-menu--right'); $menu.toggleClass( 'Dropdown-menu--top', $menu.offset().top + $menu.height() > $(window).scrollTop() + $(window).height() ); + $menu.toggleClass( + 'Dropdown-menu--right', + $menu.offset().left + $menu.width() > $(window).scrollLeft() + $(window).width() + ); + if (this.props.onshow) { this.props.onshow(); m.redraw();