overflow-y not working in safari inside a modal

Question

Ok here is the html:

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">     <table id="filterOptionsTable" class="table table-striped table-hover">     </table> </div> 

Basically, I am dynamically adding rows to the table and I would like the container to scroll the overflow. First I tried the obvious:

#filterOptionsContainer {     overflow-y: auto; } 

and that works fine everywhere except for Safari on iOS mobile devices.

Since then I have spent hours trying every combination of styles I can think of and read about but I cannot get standard overflow scrolling. The closest I got was getting the scrollbar to show (it wasn't actually scrolling though).

All help is appreciated. It is hard for me to believe that it is not possible to scroll the contents of a div in a modal in Safari...

Answer 1

Try applying this inline , or through a Jquery Script

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;" 

or through a Jquery Script

$("#filterOptionsContainer").css({     "overflow-y": "scroll",     "-webkit-overflow-scrolling": "touch" });