Bootstrap Position of dropdown menu relative to navbar item

Question

I have the following dropdown   lt label class  dropdown-toggle  role  button  data-toggle  dropdown  data-target     gt      Action  lt b class  caret  gt  lt  b gt  lt  label gt   lt ul class  dropdown-menu  role  menu  aria-labelledby  lang-selector  id  lang-selector  gt      dropdown content goes here  lt  ul gt    The upper-left corner of the dropdown is at the lower-left corner of the text  Action   but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text  How can I do that

User · Answer

Even if it s late i hope i can help someone. if dropdown menu or submenu is on the right side of screen it's open on the left side, if menu or submenu is on the left it's open on the right side.

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

To detect vertical position you can also add

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/

User · Answer

If you wants to center the dropdown  this is the solution    lt ul class  dropdown-menu  style  right auto  left  auto   gt

User · Answer

Not sure about how other people solve this problem or whether Bootstrap has any configuration for this    I found this thread that provides a solution   https   github com twbs bootstrap issues 1411  One of the post suggests the use of   lt ul class  dropdown-menu  style  right  0  left  auto   gt    I tested and it works    Hope to know whether Bootstrap provides config for doing this  not via the above css   Cheers

User · Answer

This is the effect that we re trying to achieve     The classes that need to be applied changed with the release of Bootstrap 3 1 0 and again with the release of Bootstrap 4  If one of the below solutions doesn t seem to be working double check the version number of Bootstrap that you re importing and try a different one   Bootstrap 3  Before v3 1 0  You can use the pull-right class to line the right hand side of the menu up with the caret    lt li class  dropdown  gt     lt a class  dropdown-toggle  href     gt Link lt  a gt     lt ul class  dropdown-menu pull-right  gt        lt li gt     lt  li gt     lt  ul gt   lt  li gt    Fiddle  http   jsfiddle net joeczucha ewzafdju   After v3 1 0     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    You can use the dropdown-right class to line the right hand side of the menu up with the caret    lt li class  dropdown  gt     lt a class  dropdown-toggle  href     gt Link lt  a gt     lt ul class  dropdown-menu dropdown-menu-right  gt        lt li gt     lt  li gt     lt  ul gt   lt  li gt    Fiddle  http   jsfiddle net joeczucha 1nrLafxc   Bootstrap 4  The class for Bootstrap 4 are the same as Bootstrap   3 1 0  just watch out as the rest of the surrounding markup has changed a little    lt li class  nav-item dropdown  gt     lt a class  nav-link dropdown-toggle  href     gt      Link    lt  a gt     lt div class  dropdown-menu dropdown-menu-right  gt       lt a class  dropdown-item  href     gt     lt  a gt     lt  div gt   lt  li gt    Fiddle  https   jsfiddle net joeczucha f8h2tLoc

User · Answer

If you want to display the menu up  just add the class  dropup   and remove the class  dropdown  if exists from the same div    lt div class  btn-group dropup  gt

User · Answer

Boostrap has a class for that called navbar-right  So your code will look as follows    lt ul class  nav navbar-right  gt       lt li class  dropdown  gt         lt a class  dropdown-toggle  href     data-toggle  dropdown  gt Link lt  a gt         lt ul class  dropdown-menu  gt            lt li gt     lt  li gt         lt  ul gt       lt  li gt   lt  ul gt

User · Answer

Based on Bootstrap doc   As of v3 1 0   pull-right is deprecated on dropdown menus  use  dropdown-menu-right  eg    lt ul class  dropdown-menu dropdown-menu-right  role  menu  aria-labelledby  dLabel  gt

[css] Bootstrap: Position of dropdown menu relative to navbar item

Examples related to css

Examples related to twitter-bootstrap

Examples related to drop-down-menu