CODEWITHSUNDEEP
csscss-position
FooBar
FooBar

Reputation: 6108

Break out of overflow:hidden

We are currently struggling trying to break out of an div having overflow hidden.

We have a dropdown-menu that gets filled with suggestions when the user type (type 'c' in the search field to see). This dropdown-menu is currently hidden behind the menubar, because it has "overflow hidden".

We can break out, if we remove the top:100% and set position to fixed. But we would like it to stay absolute (i.e. for mobile devices).

Created an example here: https://edukarma.com/bootstrap/

The dropdown suggestion list can be found in .headerItem.headerSearch .searchField .twitter-typeahead .tt-dropdown-menu.

Upvotes: 16

Views: 22202

Answers (3)

Joe DF
Joe DF

Reputation: 5548

I ran into this issue and it can be quite frustrating. However after reading this article, I found the suggested answer to be quite satisfying.

Essentially, You must specify an outer parent (add a 'grandparent' tag) to be explicitly position:relative; (with overflow unspecified) and the direct parent to be overflow:hidden; instead of having both of these CSS options directly applied on the same direct parent.

The examples provided (for completeness and in case the 2012 article is lost):

Not working

HTML

<div class="parent">
  <div class="child"></div>
</div>

CSS

.parent {
  position:relative;
  overflow:hidden;
}
.child {
  position:absolute; 
  top:-10px; 
  left:-5px;
}

Working! (The Child is free to roam anywhere)

HTML

<div class="grand-parent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

CSS

.grand-parent {
  position:relative;
}
.parent {
  overflow:hidden;
}
.child {
  position:absolute; 
  top:-10px; 
  left:-5px;
}

Upvotes: 23

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

A possible workaround is to replace overflow:hidden with the following:

.navbar .headerItem.headerSearch {
  display: table; /* like overflow, creates new block formatting context */
  margin-left: 180px;
  padding-right: 15px;
  margin-top: 11px;
}

.navbar .headerItem.headerSearch:after {
  /* hack to make the table use all available width */
  content: '. .';
  /* with such big spacing, the 2nd dot will always wrap to the new line,
     making the table-like block use the width of the container
     instead of shrinking to content */
  word-spacing: 99in;
  /* make this helper invisible */
  display: block;
  height: 0;
  overflow: hidden;
}

Upvotes: 5

Zaqx
Zaqx

Reputation: 1442

You can do this by setting the child to be position: absolute.

HTML

<section>
    Parent
    <div>Child</div>
</section>

CSS

section {
  width: 300px;
  height: 300px;
  background: dodgerblue;
  overflow: hidden; /* BOOM */
}

section div {
  position: absolute; /* BOOM */
  left: 100px;
  width: 100px;
  height: 400px;
  background: gold;
}

Demo: http://jsbin.com/nukic/2/edit

Upvotes: 2

Related Questions