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
Related
I'm trying to create a simple carousel with horizontal scroll with using -webkit-overflow-scrolling: touch and overflow-x: auto. Here is source code: https://codesandbox.io/s/wizardly-tu-xxfz0?file=/index.html:333-350
This works perfect for me everywhere, except iOS devices. But vertical scroll appears on iOS browsers. Here is the video: https://youtu.be/BNugrdxX9MU
I know that i can fix it by setting overflow-y: hidden on carousel container or on element container. But this solution doesn't suit me, because i need to show some content outside the element or container with absolute positioning.
It looks like as an iOS bug. Are there any ideas how to fix it?
I'm building a Cordova based app and it's been going well so far but I've got a scrolling issue on iOS.
Basically, I have a table inside a div that scrolls horizontally and I have the rest of the page, made up of a parent div that should scroll vertically - and it all works unless you try scrolling the main page while touching the table on ios.
<div class="example_container" style="height:220px;width:200px;">
<div class="example_slide" id="example_slide_1" style="text-align:center;height:100%;overflow:auto;">
<div style="width:80%;margin:auto;overflow-x:scroll;">
<table>{table content}</table>
</div>
</div>
</div>
I've made a fiddle (which is a bit fiddly to use since I can't stop the body from scrolling) essentially if you try scrolling the box while touching the table on ios, you can't but if you touch around the line under the table, the box scrolls normally.
I think it's because it's trying to scroll the body or html but I've tried preventing them from scrolling with position:fixed; and overflow:hidden; with the same results.
This works as expected on android and when emulating on chrome in windows but does not work in safari on ios or in my cordova app - if anyone could tell me why, that would be appreciated.
Add this in css -webkit-overflow-scrolling: touch; to make the scrolling work in Safari (ios).
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 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.
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.