0

I am trying to make a selectable list in Google Closure . I got almost everything , but when i added the scroll functionality to the container. i realized that something is wrong with my style if the outline element

 <div class="Selectable"
        style="height: 400px; overflow-y: scroll" id ="list2">
          <div class="selectable-item">0 </div>
          <div class="selectable-item">1</div>
          .....
          .....
          .....
 <div class="selectable-outline" style="left: 88px; top: 97px; width: 76px; height: 725px; "></div></div>
        </div>

here is the fiddle.

http://jsfiddle.net/dekajp/uC5jm/4/

i want div ( outline ) to be contained within scrollable parent. the scroll height of parent is around 2000. could not figure this out !!

Thanks for you help !!!

aked
  • 5,625
  • 2
  • 28
  • 33

1 Answers1

1

The outline element is positioned absolute, therefore you'll need the parent of that element to be position relative so that the outline element won't break containment.

/* you need to also capitalize selectable */
.Selectable {
  position: relative;
  /* more styling */
}

JSFIDDLE

Jay Harris
  • 4,201
  • 17
  • 21
  • 1
    I did had that css property in my fiddle , but then commented that out. but in my actual test page . it seems to be working with position:relative – aked Oct 25 '13 at 20:47
  • so you got it to work, right. and you also have to capitalize selectable – Jay Harris Oct 25 '13 at 20:49