CODEWITHSUNDEEP
htmlcssjquery-mobilemobile
Slava
Slava

Reputation: 48

Tables aren't scrollable in jQuery Mobile on a narrow screen

I've got a mobile website with a bunch of links and tables inside them.

I used jQuery Mobile for the whole thing. Here's what the outline looks like:

<div data-role="page" id="" table_1>
  <div data-role="header">
    <h1>Timetable for MSc Programmes</h1>
  </div>

  <div data-role="main" class="ui-content">
    <table>
      <--! the large table is here -->

    </table>
  </div>

</div>

Unfortunately this is what the page looks like on my phone. The full table can't be seen and isn't scrollable, so visitors can only view part of the table unless they switch into landscape mode.

Phone screenshot

Enclosed a table into a div element and gave it the 'webkit-overflow-scrolling:touch;' and 'overflow:scroll;' tags.

It added the scroll bars, but the width is still not represented accurately:

enter image description here

Upvotes: 0

Views: 1274

Answers (1)

ezanker
ezanker

Reputation: 24738

Put the table inside a container div and give that div a CSS class. Then setup the CSS class to scroll:

<div data-role="main" class="ui-content">
    <div class="tableCont">
        <table>
           <--! the large table is here -->

        </table>
   </div>
</div>

.tableCont {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling allows mobile webkit to scroll individual dom elements.

Upvotes: 1

Related Questions