CODEWITHSUNDEEP
javascripthtmlcss
sawa
sawa

Reputation: 168081

Overlapping dropdown

I want to embed a dropdown div in a wrapper div that has 0 height, so that it takes no space whether or not it is shown, and when it is shown, it overlays the contents placed below. Suppose that dropdown element is a div with content Foo. I did something like:

HTML

<div class="dropdown_wrapper">
  <div id="dropdown_content">Foo</div>
</div>

CSS

.dropdown_wrapper{
  height: 0;
  overflow: visible;
}

And through Javascript, I switched the #dropdown_content's style between display: block and display: none. When it is the former, I expect the content to be shown, but it is actually not shown, hidden within the wrapper div that has 0 height.

How can this be fixed?

Upvotes: 0

Views: 134

Answers (1)

dreamlab
dreamlab

Reputation: 3361

you probably do not want the wrapper to use any space in the document. to use it as an anchor point use

position: absolute;
overflow: visible;

on the wrapper. this way the content will set it's own bounding box.

the rest seems to work as you intended. check this FIDDLE

Upvotes: 1

Related Questions