dropdown-append-to-body doesn't work with .dropdown-menu-right

[bytasv]

Hello,

When adding dropdown-append-to-body to dropdown component and inner menu has .dropdown-menu-right class (for right side alignment) the dropdown menu position is set incorrectly. I've checked source code and noticed that when calculating position for dropdown-append-to-body option only left property is used, hence not positioning correctly the menu... It should be using right instead of left..

[rvanbaalen]

Please demonstrate your issue in a plunkr.

[rysilva]

Does this really need a plunkr? It's really straightforward.

I wrote the append-to-body feature of dropdown, and I actually just came across this issue myself.

Here's the plunkr so we can get that out of the way: http://plnkr.co/edit/21xjDthnZsbC2StDy2VY?p=preview

[schmuli]

I tried out a fix, by looking for the dropdown-menu-right class, and changing the calculation for the CSS positions, so in dropdown.js instead of:

  if ( appendToBody && self.dropdownMenu ) {
      var pos = $position.positionElements(self.$element, self.dropdownMenu, 'bottom-left', true);
      self.dropdownMenu.css({
        top: pos.top + 'px',
        left: pos.left + 'px',
        display: isOpen ? 'block' : 'none'
      });
    }

I used:

        if (appendToBody && self.dropdownMenu) {
            var rightalign = self.dropdownMenu.hasClass('dropdown-menu-right');
            var pos = $position.positionElements(self.$element, self.dropdownMenu, 'bottom-left', true);
            var css = {
                top: pos.top + 'px',
                display: isOpen ? 'block' : 'none'
            };
            if (!rightalign) {
                css.left = pos.left + 'px';
                css.right = 'auto';
            } else {
                css.left = 'auto';
                css.right = (window.innerWidth - (pos.left + self.$element.prop('offsetWidth'))) + 'px';
            }

            self.dropdownMenu.css(css);
        }

I didn't change the $position service, as I am setting the right property, and that is not always relevant.

I must admit that I didn't do a lot of testing, just checked that my issue was resolved, so there may be a problem with the calculations. On the other hand, I didn't change the existing logic at all, only added support for right-aligned dropdowns.

[mariocasciaro]

I'm having the same issue, thanks for the fix! @schmuli it would be nice if you could send a PR for your fix so everybody can take advantage of it.

[schmuli]

I wanted to first check that this is a valid fix, I'll try to get a PR ready in the next couple of days.

[mariocasciaro]

👍
BTW, I tried it as well and it seems working perfectly