Menu
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...
624
Fixed-Width Elements # One of the most common causes of overflow is fixed-width elements. Generally speaking, don't fix the width of any element that should work at multiple viewport sizes.
overflow: scroll Setting the value to scroll , the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it): You can use the overflow property when you want to have better control of the layout.
overflow : hidden is a property which will make any text going out of your div as hidden i.e. it will not be shown on screen and will be clipped. overflow : auto will make scroll bar's appear if the text goes out of your div.
The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.
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" }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
