Opening specific submenu on the left when the drop down is floated right and drop down opens on the left

[girishmr]

Currently I am able to open the dropdown on the left when the nav is floated to right. The need is to open only specific submenu on the left as well

Bootstrap version 2.2.1 with .dropdown-submenu pull-left property on <li></li>

Please see the example in fiddle: http://jsfiddle.net/girishmr/5AZAz/

Note: I know there are a couple of issues opened on the submenus but since those are all closed and new version is released, I just opened up a new one

Thanks

Edit: Fixed your formatting, <3 @mdo.

[blakeembrey]

I believe my CSS changes from #5067 should fix the issue. Basically involved using

left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;

instead of

left: -100%;
margin-left: 10px;

Could you let me know if that's the fix you are looking for?

[girishmr]

I have changed in fiddle with your settings. All that it does is move the submenu a few pixles to left. I wanted the menu itself to be opened on the left as in the example given in bootstrap http://twitter.github.com/bootstrap/components.html. See Submenu option for left submenu

Thanks

[blakeembrey]

Sorry - misunderstood your issue. The snippet of CSS your using is breaking it. Your using differing positioning, etc and your rules are overriding the ones Bootstrap has set. Why can't you just using pull-right on the menu itself? Just requires a bit extra markup.

http://jsfiddle.net/5AZAz/4/

[girishmr]

If I just use pull-right and not making drop down to open on the left, menu list under master (see your version) still goes out of the window. That was the reason I made it to open to the left. Now since I have another drop down with a sub menu to the extreme right, I wanted this specific sub menu to open to the left.

So by giving this choice to the developer to set the menu to open either to left or right based on the situation makes it more user friendly and developer friendly.

Thanks,

[blakeembrey]

Okay - so it will take a little more work but if you add .pull-left to the .dropdown-submenu classes won't it fix the issue? To be honest - I'm not entirely sure what you are trying to achieve.

http://jsfiddle.net/5AZAz/5/

[blakeembrey]

Did you just want .pull-right to automate pulling all the submenus to the left?

[girishmr]

That for me (your updated fiddle) is a temporary fix given the nature of the requirement is. But yes still I would like to have choice to open both drop down and specific sub menu to the left.

[blakeembrey]

No problem. Sorry if I came off rude at all. It really is up to the devs whether they implement this - I did experiment with an override earlier like this but it got messy quickly. If we override and pull-left under pull-right - we need a way to override back to pull-right (which is just another rule). But then you have cases where I wanted a submenu pulled left and it's submenu pulled right and it turned into a pretty ugly mess and you just end up having to manually apply most classes anyway.

Definitely easy enough to implement as long as it's documented with it's shortcomings. Hopefully there is a clean solution.

[girishmr]

Not a problem at all and it was not rude. You made your point. It might be a small change but I am not getting it at the moment :) and hope it would be a clean solution. I did try many options before raising this as an issue.

[girishmr]

Well What can I say. Found a solution of course with some direction from Blake :) Thanks Blake.

Specifically the <li class="dropdown">Master</li> drop down which has couple of sub menus should be looked at. By adding .pull-right (after removal of the earlier override shown in the initial version of fiddle) to the .dropdown-menu on an <ul></ul> will pull the menu to the left. Also for sub menu with .dropdown-submenu, .pull-left would do the trick to open the sub menu to the left. If just .dropdown-submenu property is set, the sub menu opens to the right.

The example http://jsfiddle.net/girishmr/5AZAz/8/ explains itself better.

I think I have got what I wanted with a few alterations to the markup. I will leave this open if there can be better solution provided.

Thanks,

[mdo]

@girishmr or @blakeembrey: Can one of you succinctly summarize what you're looking for here? I don't see any custom CSS in the fiddles that's changing default Bootstrap styles. Is there a bug or improvement to be had?

[blakeembrey]

@markdotto I think the main thing @girishmr is saying is that when we .pull-right on a dropdown menu it should .pull-left all the submenus. I don't believe it's a bug, but could be an improvement.

The only problem is that it could add confusion. E.g.

.dropdown-submenu.pull-left,
.dropdown-submenu.pull-right {
  float: none
}

/* This will target all children, but what about children of .dropdown-submenu.pull-right? */
.pull-right .dropdown-submenu > .dropdown-menu,
.dropdown-submenu.pull-left > .dropdown-menu {
  left: auto
  right: 100%
  margin-left: 0
  margin-right: -1px
}

/* Will need a pull-right override - should this be a normal selector to target all future .dropdown-menu? */
.dropdown-submenu.pull-right > .dropdown-menu {
  left: 100%;
  right: auto;
  margin-left: -1px;
  margin-right: 0;
}

Not sure if this demonstrates it correctly?

[girishmr]

@markdotto The issue basically was to open only specific dropdown and sub menus on the left when the navs are pulled right

The dropdowns opens to the right by default and in a scenario where we float the nav to the right and when the dropdowns which are to the extreme right opens it goes out of the viewport. The solution to that was to open the dropdown to the left and its sub menus also to the left. For some reason I cold not do with the base styles and had to override for the dropdown menu to open on the left with previous version of bootstrap. With 2.2.1 released (actually was waiting for it) I thought I had the solution to open the submenu as well to open in the left. But could not do unless the override was taken out. As Blake rightly pointed out I did not have the correct over ride to bring back to its original and then open the submenu to the left.

With some guidence form Blake I could manage to do this with base styles. By using .pull-right on .dropdown-menu and .pull-left on the .dropdown-submenu I could open the menus as I wanted.

When the navs as floated right, by using .pull-right on the .dropdown-menu makes it open on the left which is slightly confusing. It should be opening to the right on .pull-right and to the left on .pull-left . Isn't it?

Hope this explains the issue.

[mdo]

Punting this as we're removing submenus in 3.0. More info in the #6342 Bootstrap 3 pull request.

[H-Nguyenx]

Hi, is there a solution for Bootstrap 4 beta?
Thanks!

[vishalalim]

@blakeembrey thanks I need help, your following code is working good. But it opening all submenu on left, I want based on screen size and space available, submenu should float left or right to display.

left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;

Please check https://chaitanyam.vishalkumar.com/ last Media menu submenu is not visible in events.