CODEWITHSUNDEEP
htmlcss
Smern
Smern

Reputation: 19076

div being cut off when higher on screen than parent div

This codepen demonstrates the issue. Notice the red block .popup is cut off at the top.

It is getting chopped by the top of it's grandparent div, #hideExtraWidth.

I need to hide extra width (overflow-x) because of what I have in my actual implementation (JS changing the #wide div to create a carousel affect), but it also seems to be hiding the extra height (overflow-y)... even though I have this:

overflow-x: hidden;
overflow-y: visible;

If you take out both of the overflow properties.. you'll see it fixes the top being chopped but breaks in that now the width overflow is now visible as well.

How can I stop the top of .popup from being chopped while keeping the horizontal overflow hidden?

Upvotes: 0

Views: 1962

Answers (2)

Honore Doktorr
Honore Doktorr

Reputation: 1625

Sadly, “‘visible’ becomes ‘auto’ also when combined with ‘hidden’”. A workaround for your example: make your container large enough to contain the overflow by changing padding: 30px → padding: 130px, and move it back into position with margin-top: -100px. Sample.

Upvotes: 1

Joel Almeida
Joel Almeida

Reputation: 8037

I've changed the overflow to the #outer div .. that way everything for your carousel won't appear anyway and you still manage to have the popup.

Try this: 

$(".item").one( "mouseenter", function() {
  $("<div>")
    .addClass("popup")
    .appendTo($(this));
});
#outer {
  position: relative;
  padding: 0 0 0 0;
  width: 700px;
  margin: 0 auto;
  border: 1px solid red;
  overflow: hidden;
}
#somethingElse {
  text-align: center;
  background-color: purple;
  height: 100px;
  color: white;
}

#hideExtraWidth {
  width: 700px;
  height: 570px;
  padding-top: 30px;
  padding-bottom: 25px;
  margin: 0;
  position: relative;
  display: block;
  white-space: nowrap;
}

#wide {
  margin-left: -400px;
  padding: 0;
  width: 1500px;
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.item {
  border: 1px solid blue;
  background-color: green;
  white-space: normal;
  width: 495px;
  height: 515px;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.popup {
  position: absolute;
  top:-70px;
  height: 100px;
  width: 100px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="somethingElse">Something else</div>
  <div id="hideExtraWidth">
    <div id="wide">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions