Dropdown and popover position based on offset

[paglias]

This is not a priority but it would be useful to Open dropdowns and popovers based on current position: for example if the popover toggle is positioned at the top of the page open the popover with position: bottom so that popovers and dropdiwns will be always visible.

I thought about jquery .offset()

[ghost]

My nav bar is positioned at the bottom instead of the top, and the dropdowns are all off-screen.

+1 for this.

Edit: found a bottom-up class in the css files that solves my problem. Looks like there's no documentation for this yet.

[aanomm]

This is a bit of an issue. You can see in this screenshot for any popover element close to the right-side of page, that the popover goes off-page, lost in some dark corners of computer screens, far, far away (from sight).

[MichaelCastelbuono]

I have a similar issue with a dropdown near the end of the screen on the right. It opens and you can only see a little bit of it before it fades out of view. It would be nice if it could guess whether to open on the bottom-right, bottom-left, top-right, or top-left.

[suigintou]

+1

[mccombs]

+1

[arhea]

+1

[skattabrain]

+1 - this is especially a problem on my Droids (dont have an iPhone)... but with the narrow strip of content, it seems to almost always be appearing outside the viewport.

[fat]

You just need to provide a custom position function. There's one floating around in the github issues if you search a bit, or you could try the mailing list :)

[coderberry]

This fixes it if you do an inline style adjustment:

<ul class="dropdown-menu" style="right: 0; left: auto;">

[mccombs]

A custom position function and inline styles are messy. Wan't offset included in v1 of bootstrap? I don't think it's an unreasonable request.

[mgcrea]

I do need offset to achieve corner positionning (cf. #2915).

Please add it or allow use to set (or return via a lambda) an object {top, left} instead of only strings so we can position stuff more precisely.

[tkrotoff]

The existing custom position function fat talked about is here : #345
I didn't manage to make it work.

[Cybolic]

The dropdown function doesn't seem to support a position function, so what would be the preferred way to handle positioning for a dropdown?

[engineersmnky]

If your menu is on the right then use dropdown-menu pull-right this specifies the inline style suggested by cavneb.

[Cybolic]

What about menus that are triggered from in-page content, meaning that the user can have scrolled to a point where the menu is not visible when clicked?

[engineersmnky]

Bootstrap menus close when they lose focus so if a user scrolls to a point where the menu is not visible and interacts with any other object the menu will close. I don't know if this is what you were asking.

[Cybolic]

No, I mean something like a button on a page, that when the page is scrolled down will be at the top of the screen and would therefore naturally have the menu display below it, but when the page is scrolled up, the button would be at the bottom of the screen and the menu would then open outside of the viewport since its position is static.
How would one deal with a situation like this?

[engineersmnky]

You may have to build a custom javascript to handle this situation to toggle class .bottom-up which supposedly pushes the menu up instead of down. I have not tested this.

[archonic]

The function @fat was talking about is this

$("a[rel=popover]").popover({
  placement: function(tip, element) {
    var $element, above, actualHeight, actualWidth, below, boundBottom, boundLeft, boundRight, boundTop, elementAbove, elementBelow, elementLeft, elementRight, isWithinBounds, left, pos, right;
    isWithinBounds = function(elementPosition) {
      return boundTop < elementPosition.top && boundLeft < elementPosition.left && boundRight > (elementPosition.left + actualWidth) && boundBottom > (elementPosition.top + actualHeight);
    };
    $element = $(element);
    pos = $.extend({}, $element.offset(), {
      width: element.offsetWidth,
      height: element.offsetHeight
    });
    actualWidth = 283;
    actualHeight = 117;
    boundTop = $(document).scrollTop();
    boundLeft = $(document).scrollLeft();
    boundRight = boundLeft + $(window).width();
    boundBottom = boundTop + $(window).height();
    elementAbove = {
      top: pos.top - actualHeight,
      left: pos.left + pos.width / 2 - actualWidth / 2
    };
    elementBelow = {
      top: pos.top + pos.height,
      left: pos.left + pos.width / 2 - actualWidth / 2
    };
    elementLeft = {
      top: pos.top + pos.height / 2 - actualHeight / 2,
      left: pos.left - actualWidth
    };
    elementRight = {
      top: pos.top + pos.height / 2 - actualHeight / 2,
      left: pos.left + pos.width
    };
    above = isWithinBounds(elementAbove);
    below = isWithinBounds(elementBelow);
    left = isWithinBounds(elementLeft);
    right = isWithinBounds(elementRight);
    if (above) {
      return "top";
    } else {
      if (below) {
        return "bottom";
      } else {
        if (left) {
          return "left";
        } else {
          if (right) {
            return "right";
          } else {
            return "right";
          }
        }
      }
    }
  }
});

However, I'd recommend not using rel, just select a class like .bs-popover and note that the size of the popover is set. Adjust it as you need and keep in mind this doesn't solve offset issues you may have.

[Cybolic]

@archonic, I found that function as well, but since dropdown doesn't support a position function, it's of no use for that widget. Haven't tested it for popover, where I assume it works as desired.

[archonic]

I see what you mean. Could you use html: true for a popover and insert your dropdown menu there?

[Cybolic]

@archonic I probably could, but in the meantime I've worked around it in the design. I'll return with more if I hit the problem again later.

[Irrelon]

While this doesn't work based on offset, if you KNOW where you want it to open, I modified the bootstrap CSS to allow a data-placement="left" on the .dropdown-menu element. Then you just add this after loading bootstrap's CSS:

.dropdown-menu[data-placement="left"] {
    left: auto;
    right: 0px;
}

.navbar .nav>li>.dropdown-menu[data-placement="left"]:before {
    left: auto;
    right: 9px;
}

.navbar .nav>li>.dropdown-menu[data-placement="left"]:after {
    left: auto;
    right: 10px;
}

[tlindig]

I describe a JavaScript based solution for this problem in #10756 (comment)

[veksen]

+1 this should be included by default, or provided via an option (data or class)

[kkirsche]

For dropdowns to go up just use .dropup