CODEWITHSUNDEEP
cssscrollclipping
ink169
ink169

Reputation: 23

Overflow-y on scrolling div clipping nested div

I have a div which scrolls horizontally hooked to some buttons with jQuery. That is working fine, the problem is i have a nested div in the scrollable content which becomes clipped as it overlaps the container. I need overflow on the x axis but not on the y. overflow-x: hidden, overflow-y visible should solve this, but doesn't. I does work if i remove the overflow, but i need the overflow-x to scroll the div.

Simplified html / css below - without scrolling logic as that is not what is problematic here.. should be easy?

Thanks a million :) Andy

    <!DOCTYPE html>
    <html>
        <head>
            <title>TestDiv</title>
        </head>
        <body>
            <div style="width:100%; height:150px; border:1px solid blue">
               TOP DIV
           </div>
           <div class="slide" style="height:150px; width:800px;  border: 1px solid blue; background-color: pink;">
               <div style="border: 1px solid blue; width:1200px; height:150px;" class="inner" id="slider">
                    <table  cellspacing="0" cellpadding="0" border="2" style="table-layout:fixed; width: 1200px; height:150px">
                    <tr><td>AAAAAAAAA</td><td>BBBBBBBBB</td><td><div class="container"><div class="testDiv">XXX</div></div>CCCCCCCCC</td><td>DDDDDDDDDD</td><td>EEEEEEEEEE</td><td>FFFFFFFFF</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td></tr>
                </table>
            </div>
           </div>
            <div style="width:100%; height:150px; border:1px solid green;">
                BOTTOM
            </div>
        </body>
    </html>
<style scoped="scoped">
    .slide
    {
        position:relative;
        overflow-x: hidden;
        overflow-y:visible;
    }

    .slide .inner
    {
        overflow-y:visible;
        position:absolute;
        left:0;
        bottom:0;
        padding:0px;
    }
    .container
    {
        width: 20px;
        height: 20px;
        background-color: black;
        position: relative;
    }
    .testDiv
    {
        width: 235px;
        position: absolute;
        z-index: 999;
        left:20px;
        top: -180px;
        height: 200px;
        background-color: greenyellow;
    }
</style>

Upvotes: 1

Views: 2810

Answers (1)

Mr Tills
Mr Tills

Reputation: 61

The issue is that you are using "fixed" positioning. This will only work with "relative" positioning. To convert to relative positioning, you need to remember that the Top location is relative to the previous sibling element, whereas left is relative to the parent element.

Upvotes: 1

Related Questions