A mix of behaviors for overflow auto and visible

Question

I have HTML structure

<div class="PapaDiv">
  <input type="checkbox"/>
  <label></label>
  <div class="ChildDiv">
    <input type="radio"/><label></label>
    <input type="radio"/><label></label>
    <input type="radio"/><label></label>
  </div>
  <br/>
</div>

This animal is being constructed dynamically server side depending on the data. This is kind of like a nested menu. When the user mouseovers a checkbox with label, the ChildDiv is displayed next to it. PapaDiv has overflow-y:auto and max height defined.

So, if there are a lot of checkboxes, PapaDiv gets a vertical scroll bar. This is the wanted behavior. Now, if you mouseover the bottom checkbox, its ChildDiv also gets displayed inside PapaDiv (overflow-y:auto). And the business wants it to be displayed on top of PapaDiv for which I would have to set overflow-y:visible.

That's the dilemma here. I need a mix of both behaviors. I need ChildDiv to display outside PapaDiv and at the same time the other children to be inside with scrollbar displayed if there are lots of them. Is there a solution to this?

EDIT: I don't think this would help much, but here is the CSS:

.ChildDiv{
    background-color: #EDF1F9;
    border: 1px solid #557AB5;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    position: absolute;
}

.PapaDiv{
    background-color: #FFFFFF;
    border: 1px solid #557AB5;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
    left: 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5em;
    position: absolute;
    top: 0;
    width: 98%;
    z-index: 501;
}

PapaDiv's parent div {
    position: relative;
    width: 100%;
}

EDIT: The reason nothing shows up is because there are display:none's in CSS. There is JavaScript involved. For these elements, on mouseover on checkbox or its label, ChildDiv shows up (jQuery $('.ChildDiv').show()).

On mouseout from ChildDiv or PapaDiv: $('.ChildDiv').hide(). Also, there is a simple calculation involved to set "top" and "left" properties for ChildDiv so it appears next to its checkbox. ChildDiv is already defined with position:absolute;.

@Dimskiy, if this code is rendered as is (for example with jsfiddle: http://jsfiddle.net/Pkbc2/), nothing shows. I suspect your code makes use of a fair bit of Javascript to display anything at all – unless you show us that code, it's really hard to imagine how your problem might need solving. Could be a JS thing, could be a CSS thing, but we need to know! — Barney, Sep 11 '12 at 14:34

score 0 · Answer 1 · edited May 23 '17 at 12:27

I too have had the same problem before Dimskiy. I was trying to create a magnifying glass that appeared atop an image when the mouse hovered over it. I found that the parent div, in this case #PapaDiv has to be positioned relative while the child div, in this case #ChildDiv is positioned absolutely.

I see where the parent of #PapaDiv is positioned relative but if I recall, I had to position the immediate parent of the child element relatively.

Try this:

#PapaDiv {
    position: relative;
}
#ChildDiv {
    position: absolute;
}

Of course you can add all of your other additional CSS in there as well.

The link below is the post I used to help me out:
How to overlay one div over another div

A mix of behaviors for overflow auto and visible

1 Answers1