CODEWITHSUNDEEP
cssscrolloverflow
Martin
Martin

Reputation: 1343

Break out of an overflow:auto Container

I have a div-container inside an overflow:auto container, but I want this container to break out of the overflow:auto conatiner. I need this for a date-picker which should overlay the border of a scrollable container and should not be cut by this. Currently I have to scroll if I want to see the last row of the calendar for example. This isn´t a good solution.

<div class="wrapper">
  <p>Content</p>
  <div class="breakout_anchor">
    <p>Anchor</p>
    <div class="breakout_element">
      <h1>I want to break out of the wrapper!</h1>
    </div>
  </div>
  <p>Content</p>
  <p>Content</p>
</div>

CSS:

.wrapper {
  background-color: green;
  position: relative;
  top: 50px;
  width: 80%;
  margin: 0 auto;
  height: 100px;
  overflow: auto;
}

Here is a simple plunker to show my problem.

Is it possible to solve this problem without javascript?

Upvotes: 1

Views: 1099

Answers (1)

GifCo
GifCo

Reputation: 1363

You can do this using position:fixed on the breakout_element and then positioning it in the correct spot.

.breakout_anchor:hover .breakout_element {
    display: block;
    position: fixed;
    top: 130px;
    left: 90px;
}

See here: http://plnkr.co/edit/Tzes2Bu6NzEZbSZR2uvp?p=preview

Upvotes: 2

Related Questions