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 more submenu  However  when submenu opens - it does not fit in the window and goes too much to the right  so that user can see only first letters  How to make that submenu to open not to the right  but to the left

User · Answer

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 });
        }
    });

}

});

User · Answer

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    lt div class  btn-group  gt     lt button type  button  class  btn btn-secondary dropdown-toggle  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt      Right-aligned menu    lt  button gt     lt div class  dropdown-menu dropdown-menu-right  gt       lt button class  dropdown-item  type  button  gt Action lt  button gt       lt button class  dropdown-item  type  button  gt Another action lt  button gt       lt button class  dropdown-item  type  button  gt Something else here lt  button gt     lt  div gt   lt  div gt    Link to code  https   getbootstrap com docs 4 0 components dropdowns  menu-items

User · Answer

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    lt div class  dropdown navbar-right  gt       lt  div gt    You can then further customize the floating with a pull-left directly in the dropdown      lt div class  dropdown pull-left navbar-right  gt       lt  div gt        or as a wrapper around it       lt div class  pull-left  gt     lt div class  dropdown navbar-right  gt           lt  div gt   lt  div gt

User · Answer

The simplest way would be to add the pull-left class to your dropdown-submenu   lt li class  dropdown-submenu pull-left  gt    jsfiddle  DEMO

User · Answer

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 });
        }
    });

}

});

User · Answer

Are you using the latest version of bootstrap  I have adapted the html from the Fluid Layout example as shown below  I added a drop down and placed it furthest to the right hand side by adding the pull-right class  When hovering over the drop down menu it is automatically pulled to the left and nothing is hidden - all the menu text is visible  I have not used any custom css    lt div class  navbar navbar-inverse navbar-fixed-top  gt     lt div class  navbar-inner  gt       lt div class  container-fluid  gt         lt a class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  a gt         lt a class  brand  href     gt Project name lt  a gt         lt div class  nav-collapse collapse  gt           lt ul class  nav pull-right  gt             lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt             lt li gt  lt a href   about  gt About lt  a gt  lt  li gt             lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt             lt li class  dropdown open  gt               lt a href     class  dropdown-toggle  data-toggle  dropdown  gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt               lt ul class  dropdown-menu  gt                 lt li gt  lt a href     gt Action lt  a gt  lt  li gt                 lt li gt  lt a href     gt Another action lt  a gt  lt  li gt                 lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt                 lt li class  divider  gt  lt  li gt                 lt li class  nav-header  gt Nav header lt  li gt                 lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt                 lt li gt  lt a href     gt One more separated link lt  a gt  lt  li gt               lt  ul gt             lt  li gt           lt  ul gt           lt p class  navbar-text pull-right  gt            Logged in as  lt a href     class  navbar-link  gt Username lt  a gt           lt  p gt         lt  div gt  lt  --  nav-collapse -- gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

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       amp  before   left  - num-pixels    arrow-position              triangle outline      amp  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

User · Answer

Curent class  dropdown-submenu  gt   dropdown-menu have left  100    So  if you want to open submenu on the left side  override those settings to negative left position  For example left  -95    Now you will get submenu on the left side  and you can tweak other settings to get perfect preview   Here is DEMO  EDIT  OP s question and my answer are from august 2012  Meanwhile  Bootstrap changed  so now you have  pull-left class  Back then  my answer was correct  Now you don t have to manually set css  you have that  pull-left class   EDIT 2  Demos aren t working  because Bootstrap changed their URL s  Just change external resources in jsfiddle and replace them with new ones

User · Answer

If I ve understood this right  bootstrap provides a CSS class for just this case  Add  pull-right  to the menu  ul     lt ul class  dropdown-menu pull-right  gt      and the end result is that the menu options appear right-aligned  in line with the button they drop down from

User · Answer

The correct way to do the task is      Submenu placement itself     dropdown-submenu  gt   dropdown-menu   left  auto  right  100        Arrow position     dropdown-submenu   position  relative     dropdown-submenu  gt  a after   position  absolute  left  7px  top  3px  float  none  border-right-color   cccccc  border-width  5px 5px 5px 0     dropdown-submenu hover  gt  a after   border-right-color   ffffff

User · Answer

Only thing you have to do is   lt ul style  left -100   gt    of the menu which you want to display on RIGHT side

User · Answer

If you have only one level and you use bootstrap 3 add pull-right to the ul element   lt ul class  dropdown-menu pull-right  role  menu  gt

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

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap