CODEWITHSUNDEEP
htmlcssjquery-uioverflowcss-position
de-bugged
de-bugged

Reputation: 933

CSS Overflow with absolute positioning

I am trying to add a overflow scroll to jQueryUI draggable and resizable elements. Due to bug in jQuery UI, all resizable elements are absolute positioned by default and overflow does not work.

HTML

<div class="container">
   <div class="object" style="top:10px;"></div>
   <div class="object" style="top:20px;"></div>
   <div class="object" style="top:30px;"></div>
   <div class="object" style="top:40px;"></div>
   <div class="object" style="top:50px;"></div>
</div>

CSS

.container{
    width: 100%;
    height: 40px;
    background-color:#000000;
    top:0px;
    overflow:scroll;
}
.object{
    position:absolute;
    height:5px;
    background-color: #AAAAAA;
    left:100px;
    width:50px;
}

Is it possible to add overflow scroll to container with absolute positioned divs?

jsfiddle

Upvotes: 2

Views: 664

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157384

Yes, you can, use position: relative; on the parent container

Demo

Demo 2

.container{
    width: 100%;
    height: 40px;
    background-color:#000000;
    top:0px;
    overflow:scroll;
    position: relative;
}

Upvotes: 3

Related Questions