How to stop a div inside a scrollable div being hidden

I’ve got a div with it’s overflow set to auto, inside this there’s another ten divs with their position set to relative, each of these has a span inside them that shows when you hover over the icon. All this works great apart from the last one which is cut off due to the grandparent divs overflow. My question is how do I stop this and allow the last span to be shown?

The closest I’ve found is this: http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent but because I’ve got a series of divs inside the grandparent this doesn’t work because as soon as I remove the parent’s relative position they span shows at the top rather than where it should do.

I’ve attached a screenshot of what I’m trying to do

Try not using top or bottom co-ordinates on the absolute element and then the element will appear at its natural position in the flow. You can move it around with margins. You won’t need the position:relative on the parent or on the overflow div then.

However it does depend on exactly what you are doing with it and en example for us to work with would help :slight_smile:

Sorry I should have created an example rather than the screen shot, anyway here it is: https://jsfiddle.net/he85z7bm/1/

I think this should work…

.containingDiv{  position: relative;

}

.searchBox {
  padding: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 140px;
  background: white;
  
}
.searchResults {
  padding: 5px 10px;
  color: #333;
  min-height: 50px;
}
.Options {
  height: 17.7px;
  vertical-align: middle;
}
.Options a span {
  display: none;
  border-radius: 5px;
  white-space: nowrap;
}
.Options a:hover span {
  display: block;
  position: absolute;
  top: 15px;
  padding: 5px;
  margin: 10px;
  z-index: 100;
  text-align: left;
  background: white;
  box-shadow: 1px 1px 10px black;
  color: green;
}

they KEY here is: give containingDiv relative position…and have NO OTHER descendants of containingDiv have relative or absolute position until .Options a:hover span. Options a:hover span will then be placed in the same layer as the containingDiv and thus be outside the overflow hidden given to .searchBox.

hope that helps

Hi,

I don’t think you can solve this without scripting of some sort.

Dresden’s example above will always place the hover element at the top of the div and assuming this is just a small demo and the real layout is much taller then the element will be a long way from its trigger.

The last element is not really cut off anyway as you can still scroll the container to see the full text (just as you will for the first item).

You can make the hover element appear outside of the div by not using co-ordinates as I mentioned earlier but the problem is that the element will show further down the page each time you scroll.

Assuming this is part of a taller div then I would just set the last item to display:upwards to avoid this issue.

e.g.

.searchResults:last-child .Options a:hover span {
	top:auto;
	bottom:-15px;
}

Now why didn’t I think of that!!

Everything is set dynamically so I can just use nth-child to make sure the last one is set above rather than below the link

Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.