How to Render Bootstrap Dropdown Above the Object

How to render bootstrap dropdown above the object?

This is by default part of what Bootstrap can do. It's in the docs under Button Dropdowns - Dropup menus

<div class="btn-group dropup">

As it's absolutely positioned, you will need to have some space above the button so you can see the drop up menu, so I wouldn't use it at the top of a page.

I've set up a fiddle here for you. If you remove the <br> at the top, you'll see that the menu options are hidden at the top of the output box.

Force Bootstrap dropdown menu to always display at the bottom and allow it go offscreen

I wanted to tackle this problem with CSS alone.

Bootstrap's dropdown's uses Popper.js for the positioning of the dropdown menu. This makes the task challenging since Popper.js seems to check and evaluate the position of the dropdown when the window is scrolled so I needed to use an !important rule to override Popper.js.

Here's the code I came up with, based on your example.

.dropdown-menu{
    transform: translate3d(5px, 35px, 0px)!important;
}

Example codepen: https://codepen.io/Washable/pen/xPdqVp

This will always force the dropdown to be below the button, even if the button is at the bottom of the screen.

Bring Bootstrap Dropdown to front

FINALLY I remembered the cause:

the parent element has overflow-y: hidden

Set that to initial/visible and the dropdown will be shown.

Bootstrap dropdowns menus appearing behind other elements - IE7

Its a stacking context issue!

Even though you are using z-index on the dropdown, it is only relative to elements in the same stacking context. You need to add a z-index and a position to a parent element in order to get this to work. In this case I would recommend the header-top div

Bootstrap: Position of dropdown menu relative to navbar item

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.

Before v3.1.0

You can use the pull-right class to line the right hand side of the menu up with the caret:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

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:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

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:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/

Bootstrap 5

Again, very similar for Bootstrap 5 except now it's dropdown-menu-end

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-end">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Fiddle: https://jsfiddle.net/joeczucha/psnz2u36/

Make dropdown menu go upwards if it is at the bottom of the browser window, automatic toggle between down and up, depending on position

You are going to have to handle this yourself, it may be a little messy but I honestly I don't see how you can do it otherwise. I have modified your li tag to add a class (you can also use id) attribute to be able to reference it using jQuery (or plain javascript if you want to) and then added an ng-class to be able to dynamically assign either dropdown or dropup.

<li class="{{'row-' + row}}" ng-class="getClass(row)">
    <a class="btn-link dropdown-toggle"><i class="icon-align-justify"></i></a>
    <ul class="dropdown-menu">
        <li ng-repeat="menu in [1,2,3]"> <a class="btn-link">{{menu}}</a></li>
    </ul>
</li>

Now, inside your controller, you can create the getClass function to decide, based on the dropdown's position relative to the window, which class it should have.

var dropdownHeight = 140; // estimate/calculate the dropdown list's height manually
$scope.getClass = function (row) {
    if ($(window).height() - $('.row-' + row).position().top < dropdownHeight) {
        return 'dropup';
    }
    return 'dropdown';
};

You can play around with the values of the height until satisfied with the behavior, but keep in mind the you might want to add an event listener on window resize (and related events) to be able to recalculate the classes based on the new numbers.

Bootstrap dropdown clipped by overflow:hidden container, how to change the container?

if anyone interested in a workaround for this, bootstrap dropdown has a show.bs.dropdown event you may use to move the dropdown element outside the overflow:hidden container.

$('.dropdown').on('show.bs.dropdown', function() {
  $('body').append($('.dropdown').css({
    position: 'absolute',
    left: $('.dropdown').offset().left,
    top: $('.dropdown').offset().top
  }).detach());
});

there is also a hidden.bs.dropdown event if you prefer to move the element back to where it belongs once the dropdown is closed:

$('.dropdown').on('hidden.bs.dropdown', function() {
  $('.bs-example').append($('.dropdown').css({
    position: false,
    left: false,
    top: false
  }).detach());
});

Here is a working example:

http://jsfiddle.net/qozt42oo/32/

Make nav dropdown show above all other divs

You only need to add two lines of CSS

Example fiddle

CSS

.flexnav{
    -webkit-padding-start: 0px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width:90%;
    position: relative; /* <-- Added */
    z-index: 1; /* <-- Added */
}

The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).

The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.

Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.

Bootstrap dropdown not working

Working demo: http://codebins.com/bin/4ldqp73

try this

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

---

Related Topics