Mattias Mattias - 2 months ago 6
CSS Question

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
.

Answer

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;
}