CODEWITHSUNDEEP
jquerytwitter-bootstrapcsstwitter-bootstrap-3
user472269
user472269

Reputation: 367

html element hiding behind another element

Fiddler to demonstrate the html content

https://jsfiddle.net/ASel1984/dd9gpnot/4/

code in the fiddle

Here I have bootstrap button which will show drop menu upon click.

When i click my button, the drop menu content is hiding behind the header div. How can i show the drop menu items to appear above the header div?

Note: I want to show only drop menu items above the header div.

Upvotes: 0

Views: 1123

Answers (2)

Bryan Bierce
Bryan Bierce

Reputation: 58

So the actual problem with your dropup menu was not that it was hiding behind the header but that it was basing it's alignment off of the parent div. 

              <div class="header-space">
                <br/><br/><br/>  
                <br/><br/><br/> 
              </div>
              <div class="btn-group dropup">
                <button class="btn btn-xs dropdown-toggle" aria-haspopup="true" aria-expanded="false" type="button" id="dropupMenu" data-toggle="dropdown">Add  Button<span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu" area-labelledby="dropupMenu">
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>                 
                  <li><a href="#">Link 3</a></li>  
                  <li><a href="#">Link 4</a></li>
                  <li><a href="#">Link 5</a></li>                 
                 </ul>
                </div>

You can see here that by making a div wrap the header space and then a separate div wrapping the actual popup button it will align the popup with the top of the button since it is now at the top of that div. Now you can make your text appear as you want it over that header space by setting width and height of its elements to your liking. Hope that helps!

Edit: I see that you have updated the code so that the drop-up aligns properly now and am not quite sure what the last piece you are trying to solve is. I think you are saying you would like the drop-up to sit on top of the 'div1' which holds the table. If this is correct it can be done by setting the overflow-y to visible as follows:

                .div2 {
                    overflow-y: visible;
                    height: calc(100vh - 50px);
                    border:2px solid red;
                }

If I am misunderstanding your objective and you could please restate the issue with more specifics I'd be happy to look back over it.

Upvotes: 1

Ultimater
Ultimater

Reputation: 4738

Just give your UL "dropdown-menu pull-right" element position:relative like so:
<ul class="dropdown-menu pull-right" style="position:relative" role="menu">

https://jsfiddle.net/dd9gpnot/1/

Upvotes: 0

Related Questions