Dropdown auto position.

[sathyamoorthi]

I'm sure this should have been discussed. But i'm only seeing this OLD thread (#1411) regarding this issue. I did small piece of code to achieve this. If you wish i can give PR with that. Else, someone point me out the real reason why this should not be added into the core?

-Thanks.

[cvrebert]

For tooltips+popovers, the "auto" placement option is now available.

For dropdown menus, I don't know if there's an explicit justification beyond it being less critical in that case. Also, I haven't checked, but .dropup might undocumentedly work. Needing it to be truly dynamic seems less common.

[sathyamoorthi]

So you put "feature" label and assigned it to 3.1.0 and seems like you are interested. I did like this.

i added data-placement-range option to button.

<button type="button" class="btn btn-default dropdown-toggle" 
data-placement-range="#div-item" data-toggle="dropdown">

and i added below code in Dropdown.prototype.toggle.

var placement, placementHeight, whereThisEnd;

if((placement = $this.data("placement-range"))) {
    placementHeight = $(placement).innerHeight() - 10; //10 is for scrollbar. need to replace it with some logic.
    whereThisEnd    = $parent.position().top + $parent.height() + $parent.find(".dropdown-menu").height();

    if(whereThisEnd > placementHeight)
        $parent.addClass("dropup");
    else
        $parent.removeClass("dropup");
}

It works in my case and it needs to be reviewed with other cases too. But i like data-placement-range option if it is not needed, then dropdown needs to be added directly into body, i think.

[cvrebert]

Just to clarify: The label is merely descriptive. The milestones aren't binding.

[cvrebert]

Seems like you could use documentElement.clientHeight to help calculate the scrollbar's height.

[ravimallya]

+1

[schorsch]

+1

[felipekoblinger]

+1

[fishiky]

It will be good to add dropdown placement customizing. Not only up and down but left and right too

[tlindig]

For all those who like to use this functionality immediately, here is a simple solution using jQuery plugin: PositionCalculator.

JS Bin<script src="http://static.jsbin.com/js/embed.js"></script>

  $(document).on("shown.bs.dropdown.position-calculator", function(event, data) {
    var $item = $('.dropdown-menu', event.target);
    var target = data.relatedTarget;

    // reset position
    $item.css({top:0, left:0});

    // calculate new position
    var calculator = new $.PositionCalculator({
      item    : $item,
      target  : target,
      itemAt  : "top left",
      itemOffset: { y:3, x:0, mirror:true },
      targetAt: "bottom left",
      flip    : "both"
    });
    var posResult = calculator.calculate();

    // set new position
    $item.css({
      top: posResult.moveBy.y + "px",
      left: posResult.moveBy.x + "px"
    });
  });  

In that example, only the "auto flipping" is demonstrated, but you can do a lot more with it.
You could also specify corner of placement (my be read this from an attribute), add special classes to the dropdown-menu depending on resulting placement an so on.

[fat]

Else, someone point me out the real reason why this should not be added into the core?

My default state with most of these plugins is I want to add nothing and keep them as lightweight as possible.

So instead, i think a better question would be "what is the "real reason" this should be added into core?" Why would you need a dropdown to auto detect the direction of the drop… seems like the kinda of thing which should be fairly obvious.

[fat]

That said, happy to be convinced otherwise

[mdo]

Nah, punting.

[sathyamoorthi]

yes. drop it......

[mynameistechno]

The reason for this would be if you have a dropdown toggle (like a link or button) to the right of an element that can have variable width (e.g. a search query string that was entered). So the toggle can sometimes be towards the rightmost or leftmost part of the screen depending on what the user entered, and therefore the dropdown menu will sometimes be offscreen. I dynamically add a pull-right to the menu when I can, but it's not ideal. Would be nice if it behaved like popover. I may switch to using popover but dropdown works better in this and other cases.

[tlindig]

@mynameistechno dynamic positioning is a broad field. I agree with @fat and @mdo that bootstrap should be slim and clean. IMHO it should only brings styling and some root functionality.

It is very easy to inject special functionality by adding a plugin for people who need this. See my post above.

[Poeticluvchild]

This Is The Best Solution

http://tlindig.github.io/position-calculator/

[jimiayler]

I have this problem and adding the PositionCalculator snippet quoted above worked, but made the dropdown as wide as the containing element, in my case a 936 pixel wide navbar. I'd welcome a solution that didn't require a separate plugin.

[tlindig]

It is out of Topic, sorry. but do not know how I can answer otherway.

@jimiayler if you give me jsbin, I could try to help you. May be you open an issues at project PositionCalculator.

[jimiayler]

!!! Strange, since I was responding to directly to a post about the jQuery snippet that was not the PositionCalculator. I hope to find a separate workaround but thanks for getting back to me. Peace, jk ________________james keepnews
 
When composing, think in terms of scale. Small, medium, large, and ridiculous. It took me decades to have the tuba piece performed but it would never have been performed if it weren't written. So write.
 — Anthony Braxton, to Kyoko      Kitamura, at JFK Airport      _______music+writing+multimedia

 On Thursday, October 2, 2014 5:59 AM, Tobias Lindig <[email protected]> wrote:

It is out of Topic, sorry. but do not know how I can answer otherway. @jimiayler if you give me jsbin, I could try to help you. May be you open an issues at project PositionCalculator. —
Reply to this email directly or view it on GitHub.