Break Out of Overflow:Hidden

Break out of overflow:hidden

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

Hovered element to overflow out from an overflow:hidden element css

Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden

Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.

force element to display outside of overflow:hidden

The overflow:hidden definition will hide anything inside that element that extends beyond its bounds.

Depending on your specific application, you may be able to use a structure like this:

.container {  position: fixed;  top: 30px;  left: 50px;  height: 30px;  width: 300px;  background: red;}.outer {  overflow: hidden;}.inner {  position: absolute;}.show-up {  width: 100px;  height: 300px;  background: green;  position: relative;  margin-left: 20px;}

<div class="container">  <div class="outer">    <div class="inner"></div>  </div>  <div class="show-up">this needs to show up ALL 300 pixels high of it</div></div>

Overflow hidden breaks layout

Simply add vertical-align:bottom; to the .bottom class and the buttons will appear inline again.

See this updated fiddle: http://jsfiddle.net/HNx8f/4/

.button{
    display: inline-block;
    vertical-align:bottom;
    width: 24px;
    height: 24px;
    background: red;
    position: relative;
    overflow: hidden;
    border: 0;
    text-indent: -9999px;
}

Check out W3 Schools for a full list of the properties you may use, however in your case any of these should help you:

• top
• middle
• bottom

Overflow y hidden breaks overflow x visible

So the only way I could get this working was to set the position of the blue box to be fixed and then using JavaScript to change the top and left values on document ready and window resize.

Fiddle here: http://jsfiddle.net/3dhdy9e9/15/

Code:

function positionBox(){
 var left = $('#theBox').offset();
left = left.left;

var top = $('#theBox').offset();
top = top.top;

    $('#theBox').css({ 'position': 'fixed', 'left': left, 'top': top });   
}

$(document).ready(function(){
    positionBox();
    $(window).resize(function(){
        positionBox();
    });
});

Displaying an element outside overflow hidden container

You can change positioning of the dropdown to fixed and handle the scroll using js, like the following.

var main = document.getElementsByClassName('main')[0];var dd = document.getElementsByClassName('pAbsolute')[0];var offset = dd.getBoundingClientRect().top;main.onscroll = function() {  var st = main.scrollTop;  ddt = (offset - st);  dd.style.top = ddt + 'px';}

.main {  height: 100px;  overflow-y: scroll;  overflow-x: hidden;}.pRelative {  position: relative;}.pAbsolute {  position: fixed;}.dropdown {  width: 100px;  background-color: cornflowerblue;  z-index: 1000;}.option {  border-top: 1px solid green;  border-bottom: 1px solid green;}table td {  border: 1px solid black;  padding: 10px;}

<div class="main">  <table>    <tr>      <td>row1 column1</td>      <td>        <div class="pRelative">          <div class="pAbsolute dropdown">            <div class="option">Zero</div>            <div class="option">One</div>            <div class="option">Two</div>            <div class="option">Three</div>            <div class="option">Four</div>            <div class="option">Five</div>            <div class="option">Six</div>          </div>        </div>      </td>      <td>row1 column3</td>    </tr>    <tr>      <td>row2 column1</td>      <td>row2 column2</td>      <td>row2 column3</td>    </tr>    <tr>      <td>row3 column1</td>      <td>row3 column2</td>      <td>row3 column3</td>    </tr>    <tr>      <td>row4 column1</td>      <td>row4 column2</td>      <td>row4 column3</td>    </tr>    <tr>      <td>row5 column1</td>      <td>row5 column2</td>      <td>row5 column3</td>    </tr>    <tr>      <td>row6 column1</td>      <td>row6 column2</td>      <td>row6 column3</td>    </tr>    <tr>      <td>row7 column1</td>      <td>row7 column2</td>      <td>row7 column3</td>    </tr>    <tr>      <td>row8 column1</td>      <td>row8 column2</td>      <td>row8 column3</td>    </tr>  </table></div>

---

Related Topics