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

fix(dropdown): align position with or without vertical scrollbar #6008

Closed
wants to merge 2 commits into from
Closed

fix(dropdown): align position with or without vertical scrollbar #6008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa4105d
fix(dropdown): align position with or without vertical scrollbar
dolevd Jun 14, 2016
fafbf9c
Update dropdown.spec.js
dolevd Jun 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions src/dropdown/dropdown.js
View file
Open in desktop
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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, the eslint issue had to do with using tabs instead of spaces (I used Notepad++ which isn't the best tool for the job).
Eslint passes now, but I can change this if you wish.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, not a big deal


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
View file
Open in desktop
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() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In a comment before this issue, can you mention // issue #5942?

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);
});
});
});