Ngx-bootstrap: Top Right Navbar dropdown goes off the right side of the screen

[dessalines]

Example of top right navbar dropdown :

It creates a scrollbar, which goes to the right side, and is unnecessary, the dropdown should just auto-place left, or provide an alignment option.

[valorkin]

auto place, yes
working on updating positioning service

[valorkin]

Duplicate, working on new positioning service

[hacenator]

the same behaviour in 1.6.1

[valorkin]

not the same, because now you can configure a position of attachment

[hacenator]

Do you mean 'placement' or class 'dropdown-menu-left/right'?
So if I want to put it at the right side, it always be out of screen because there is no 'auto' placement for attachments anymore?

[valorkin]

Check docs please, there are a sample for it

[hacenator]

Unfortunately there is nothing in docs that can answer my question - why it worked before, and broken in 1.6.1.

[valorkin]

This is your case http://valor-software.com/ng2-bootstrap/#/dropdowns#alignment

[hacenator]

Yes, thank you, Dmitry. I already fixed it. I just meant it worked before and doesn't works only in 1.6.1 (perhaphs starting from 1.5.0), so it's should be marked as "BREAKING CHANGES" in changeslog or smth similar, because dropdown doesn't work as before. there is a lot of info in 1.5.0 about dropdown, but nothing about 'alignment'.

[valorkin]

Oh, this. Any idea how to describe it?

[hacenator]

I think for me the problem was in .pull-right which is deprecated in bootstrap 3.1.0. But I don't know how it's worked before (I mean internally in bootstrap), and why .pull-right doesn't works as before. So when I added '.dropdown-menu-left' (yes, left), it was fixed, because with that alignment it not so close to the right screen border anymore. Actually, I didn't tested it with long text in menu, so maybe it still can out of the screen in this case.

Maybe that text can be used (from bootstrap docs). Because there is notification that 'pull-right' is deprecated:

Deprecated .pull-right alignment
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

[rochapablo]

I was having the same problem, but with bootstrap v4-alpha. I tried use placement
but it didn't work.

To fix here's what I did:

.dropdown-menu { right: 0; left: auto; }

[IerominSergii]

@rochapablo Thank you! It works with it!)

.dropdown-menu { right: 0; left: auto; }

[columbian-chris]

For a more recent solution than this (for people from the future still looking here), add the dropdown-menu-right class to your dropdown-menu.

[phuongpentest]

when you in sm mode it go off of the left side. How?