I have a .table-responsive div inside of a .panel. When scrolling in iOS Safari, if you "grab" the screen by the .table-responsive element, it does not let you scroll vertically, only horizontally. The browser will bounce the bottom edge up and the top edge down, as if you are at the bottom of the page.
I checked the same general html structure on Bootstrap's documentation page and the vertical scrolling on .table-responsive works there.
Things I tried:
All the proposed solutions from this related ticket:
Bootstrap responsive table not scrolling vertically on iOS devices
Removed -webkit-overflow-scrolling: touch; from all elements
Checked for parents with overflow: hidden;.
Note that the tables are wrapped with the jQuery DataTables plugin, but I also tried wrapping the table in the .table-responsive div with the fnDrawCallback callback of datatables. This helps slightly in that I am now able to scroll when touching the pagination/other datatables elements around the actual table. This leads me to believe that the problem is definitely .table-responsive itself.
Also, I'm not sure if it's relevant, but the mobile view has a position: fixed; header applied.
What else do I need to consider that can prevent scrolling the page vertically on certain elements? I also noticed the same effect on a text input field, but that's less annoying since it has lots of areas around it where you can still scroll, unlike a table that takes up almost 100% width.
Thanks in advance!
EDIT: I tried Chrome on iOS, it has the same issue. Chrome on Android works perfectly.
Related
I was trying to build a simple fixed-width html table, with a scrollable body. On mobiles, I wanted it to preserve the width and to overflow with scrolling.
Here's the bin http://output.jsbin.com/hefuzeleza (open it on mobile phone or tablet, in a browser simulation it works fine).
Anyway the code I have looks like this:
div.wrapper // width: 1060px; overflow-x: auto
table
thead
tbody // height: 300px; overflow-y: auto;
My intent is pretty staightforward, the table should be scrollable in both axes. It works on desktop just like that. But on mobile it doesn't allow the horizontall scroll by dragging on the table body (where overflow-x is set).
I'm assuming the problem is that I cannot move the body horizontally, because the vertical scroll exist and the "touch" mobile event doesn't propagates any further (can't reach the wrapper with X scroll).
I've tried putting z-indexes and changing overflow-y/x to unset on elements. No result so far, I wonder if there's any other workarounds.
Thanks in advance.
Add the following css line to your div that needs horizontal scroll:
-webkit-overflow-scrolling: touch;
I tested on Android and it works. On iOS it's not working. The above setting should do the trick.
I have recently noticed that when you have a div containing overflowed content that is scrollable, in chrome, you can smoothly transition scrolling from that div to the rest of the body, but in Safari, you can not. Instead of smoothly transitioning, the scrolling stops when you reach the top or bottom of the contained element, and you must scroll again to begin scrolling on the body. It is vital to the project I am working on that I allow Safari to scroll smoothly the same way Chrome does. For the life of me I can not figure out how to do this. Any input is appreciated, thank you for your time!
You can try my go to settings for a CSS element that is scrollable. Although I can't help you too much without seeing your code, try implementing these:
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
I usually apply these for iOs devices and it does the trick. Not 100% sure if it will help your problem.
Safari separates scroll gestures for different elements on purpose so that the user can clearly tell what element is being scrolled.
Of course, you can use JavaScript to solve this in a hacky way. For example, you can set the ScrollTop of body to the amount that the user scrolled when the div has reached to the bottom.
This is what I have:
<div class="table-responsive">
<table class="table" style="background: transparent">
....
</table>
</div>
I am using the following bootstrap.css file: http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css
When I try to scroll up and down on an iOS device (while my finger is touching the table), it doesn't scroll. It just drags the whole page up and down. I have to touch the body background or any other object, other than the table, in order to scroll. This problem doesn't come up in Android devices, but it seems to be there on iOS devices, like iPhone.
I tried adding overflow-y: auto to <div class="table-responsive">, but it still didn't work.
What do I need to add in order to enable scrolling on mobile devices (Apple devices, specifically)?
For anyone else having this problem, all I had to do to solve it was to add the following line to the css of the table-responsive class:
-webkit-overflow-scrolling: touch;
And now it works as expected.
I had the same problem then I removed overflow: hidden; from html and body.
The behavior of Safari on IOS matched the behavior of Chrome on Android, ie, the page was scrolling vertically again. Check and see if a parent of .table-responsive has overflow-hidden and try commenting it out.
I'm still looking for a better solution that will not force me to alter the CSS of parent elements.
[EDIT]
Found it. You don't need to change the overflow value on the parent of .table-responsive, just make sure you add
parent {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
This only makes tables scroll horizontally. Vertically scrolling with tables is not apart of Twitter Bootstrap.
Check out their documentation for more information: Responsive Tables under the CSS Tab
Source:
http://getbootstrap.com/css/#tables
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.
Anybody's got ideas, how to get around the problem that scrolling horizontally clears div background colors/images.
There's a similar problem example for example on www.f-i.com.
If the browser window is small enough to display horizontal scolling and then you scroll to right the content gets hidden (probably the background color of the divs get replaced by body background color... or something)
This happens at least with current versions of Mac Chrome and Safari.
I'm using 960.gs if it has anything to do with that..
Thanks in advance,
Harry S
On the www.f-i.com site, if you look carefully the div.main has overflow: hidden;
If you remove this it all works fine.