Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render bootstrap dropdown above the object?

I have this HTML which renders a bootstrap dropdown under the object. It is possible to make it apear above the Title button?

<div class="btn-group">           <a class="btn dropdown-toggle" data-toggle="dropdown">             Title             <span class="caret"></span>           </a>           <ul class="dropdown-menu">                 <li class="dropdown-submenu"><a>Option 1</a></li>                 <li class="dropdown-submenu"><a>Option 1</a></li>                  (various number of <li>)           </ul>         </div> 

I've tried with position:absolute; top:50px but doesn't work for any case.
Thanks!

like image 370
Alexandru R Avatar asked Sep 18 '13 14:09

Alexandru R


People also ask

How do I display a dropdown?

Example Explained HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.

How do I bring a drop down menu to the front in HTML?

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

How can create hover dropdown in Bootstrap?

Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.

How Bootstrap dropdown is implemented?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.


1 Answers

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.

like image 178
Joshua M Avatar answered Sep 24 '22 11:09

Joshua M