Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
fix(dropdown): align position correctly with scrollbar
Browse files Browse the repository at this point in the history
- Fix horizontal alignment independent of the presence of a vertical scrollbar

Closes #6008
Fixes #5942
  • Loading branch information
dolevd authored and wesleycho committed Jun 27, 2016
1 parent d846e2d commit 2d831bc
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 2 deletions.
10 changes: 8 additions & 2 deletions src/dropdown/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,8 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
var pos = $position.positionElements($element, self.dropdownMenu, 'bottom-left', true),
css,
rightalign,
scrollbarWidth;
scrollbarPadding,
scrollbarWidth = 0;

css = {
top: pos.top + 'px',
Expand All @@ -208,7 +209,12 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
css.right = 'auto';
} else {
css.left = 'auto';
scrollbarWidth = $position.scrollbarWidth(true);
scrollbarPadding = $position.scrollbarPadding(appendTo);

if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
scrollbarWidth = scrollbarPadding.scrollbarWidth;
}

css.right = window.innerWidth - scrollbarWidth -
(pos.left + $element.prop('offsetWidth')) + 'px';
}
Expand Down
30 changes: 30 additions & 0 deletions src/dropdown/test/dropdown.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -702,4 +702,34 @@ describe('uib-dropdown', function() {
});
});
});

// issue #5942
describe('using dropdown-append-to-body with dropdown-menu-right class', function() {
function dropdown() {
return $compile('<li style="float: right;" uib-dropdown dropdown-append-to-body><a href uib-dropdown-toggle>Toggle menu</a><ul uib-dropdown-menu class="dropdown-menu-right" id="dropdown-menu"><li><a href>Hello On Body</a></li></ul></li>')($rootScope);
}

beforeEach(function() {
element = dropdown();
$document.find('body').append(element);

var menu = $document.find('#dropdown-menu');
menu.css('position', 'absolute');
});

afterEach(function() {
element.remove();
});

it('should align the menu correctly when the body has no vertical scrollbar', function() {
var toggle = element.find('[uib-dropdown-toggle]');
var menu = $document.find('#dropdown-menu');
toggle.trigger('click');

// Get the offsets of the rightmost position of both the toggle and the menu (offset from the left of the window)
var toggleRight = Math.round(toggle.offset().left + toggle.outerWidth());
var menuRight = Math.round(menu.offset().left + menu.outerWidth());
expect(menuRight).toBe(toggleRight);
});
});
});

0 comments on commit 2d831bc

Please sign in to comment.