CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3responsive-designjasny-bootstrap
kfirba
kfirba

Reputation: 5441

Bootstrap responsive table doesn't scroll horizontally on iOS devices

I have a table with the following markup:

<div class="table-responsive"
    <table class="table table-hover"
        <!-- table data-->
    </table>
</div>

As the documentation says, my table should now be able to scroll horizontally. It does work if I use chrome's devices emulator. However, when I try it using a real iPhone (iPhone 5s in this case - tested on iPhone 6 as-well) then I can't scroll the table horizontally at all. I can see the last column displayed in the viewport by default and I just can't scroll it side ways. I tried that in chrome and safari on my iPhone and got the same behavior.

What I tried to do is add the -webkit-overflow-scroll: touch but it didn't solve the problem. I've also tried to manually add overflow-x: scroll instead of the default auto but no avail.

I'm not sure it matters but I also have a bootstrap plugin - offcanvas - by jasny bootstrap and I can't scroll that side menu vertically on my iPhone as-well. It all works in the emulators but fails on the real thing.

Maybe those two are connected somehow.

Any help is appreciated.

Edit:

I have just tested that on an android phone and it seems like I can scroll the table horizontally as expected. However, I still can't scroll the side menu vertically even on android. I guess it means that these problems aren't connected to each other.

Upvotes: 16

Views: 16289

Answers (3)

Yann Combette
Yann Combette

Reputation: 1

.table-responsive {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

Upvotes: 0

Rana Nematollahi
Rana Nematollahi

Reputation: 317

.table-responsive .table {
    max-width: none;
    -webkit-overflow-scrolling: touch !important;
}

Upvotes: 12

kfirba
kfirba

Reputation: 5441

I found out that by default the .table element has max-width: 100% and safari "respects" this so it set the width to be 100% which means that the .table element isn't overflowing the .table-responsive element hence causing it to not be scrollable. This somehow doesn't affect android phones.

The fix was rather easy:

.table-responsive .table {
    max-width: none;
}

Upvotes: 22

Related Questions