how to make twitter bootstrap submenu to open on the left side?

Question

I was trying to create twitter bootstrap submenu in dropdown menu, but I\'ve got a problem: I have dropdown menu in the top right corner of the page and that menu has one mo

Answer 1

If you're using LESS CSS, I wrote a little mixin to move the dropdown with the connecting arrow:

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

Then to move a .dropdown-menu with an id of dropdown-menu-x for example, you can do:

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

Answer 2

If I've understood this right, bootstrap provides a CSS class for just this case. Add 'pull-right' to the menu 'ul':

<ul class="dropdown-menu pull-right">

..and the end result is that the menu options appear right-aligned, in line with the button they drop down from.

Answer 3

If you have only one level and you use bootstrap 3 add pull-right to the ul element

<ul class="dropdown-menu pull-right" role="menu">

Answer 4

If you are using bootstrap v4 there is a new way to do that.

You should use .dropdown-menu-right on the .dropdown-menu element.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Link to code: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Answer 5

Actually - if you are ok with floating the dropdown wrapper - I've found it to be as easy as to add navbar-right to the dropdown.

This seems like cheating, since it's not in a navbar, but it works fine for me.

<div class="dropdown navbar-right">
...
</div>

You can then further customize the floating with a pull-left directly in the dropdown...

<div class="dropdown pull-left navbar-right">
...
</div>

... or as a wrapper around it ...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

Answer 6

I have created a javascript function that looks if he has enough space on the right side. If it has he will show it on the right side, else he will display it on the left side. Again if it has has enough space on the right side, it will show right side. it is a loop...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});