CSS scroll not showing properly on mobile device

Question

I have the code at the bottom of this post controlling a <div> within my page <div> in jQuery Mobile. I have this div to make a table scroll, as it overflows horizontally on the page. It shows up as in this screenshot, however:

Table fills ~50% of the page, then scrolls

This same issue occurs when it is oriented vertically, but this view illustrates it better. I have scrolled the div sideways as well to better illustrate the two borders. I want the div to simply fill the full width of the page on mobile devices, as it displays properly on larger screens, but I want it to scroll horizontally if it overflows. I have tried both overflow: scroll; and overflow: auto; in addition to trying the code with and without -webkit-overflow-scrolling: touch;. No method that I have tried for setting the width has yet worked, including width: 100%; and position: absolute; left: 0; right: 0; as suggested elsewhere.

CSS:

@media only screen and (min-width: 1025px){
    .ui-page {
    width: 960px !important;
    margin: 0 auto !important;
    position: relative !important;
        border-right: 5px #111111 outset !important;
        border-left: 5px #111111 outset !important;
        border-bottom: none;
    }
}

@media only screen and (max-width: 1024px){
    .tblscroll {
        width: 100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
}

Simplified HTML:

<div data-role="page" id="resultsmain" data-title="Survey Results">
    <div data-role="header"><h1>Title</h1></div>
    <div data-role="content">text
        <div class="tblscroll">
            <table>
                ...table information...
            </table>
        </div>
    </div>
</div>

It's okay. in your case, I recommend using ui-grid. check this jquerymobile.com/demos/1.2.0/docs/content/content-grids.html — Omar
– Omar, Commented Mar 19, 2013 at 15:21

klewis · Accepted Answer · 2013-03-19 14:58:18Z

1

you could try using a CSS display block around your div elements width defined width's and adjusting the percentages.

answered Mar 19, 2013 at 14:58

klewis

8,54816 gold badges70 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

advermark · Accepted Answer · 2013-03-19 15:04:40Z

0

It appears as though its the table itself which is the issue.

I would set the table width to 100%, and fix rows that won't grow or shrink

table{ width:100%; }

answered Mar 19, 2013 at 15:04

advermark

2311 silver badge10 bronze badges

1 Comment

vaindil Over a year ago

That unfortunately did not work. I tried using both the CSS and HTML methods of setting width to 100%, but neither fixed the issue.

vaindil · Accepted Answer · 2013-03-20 17:45:45Z

0

This doesn't really help at all, but I loaded it up today and it works perfectly. I changed nothing from yesterday to today, so it must have been a caching issue of some sort (even though I had cleared my mobile cache).

answered Mar 20, 2013 at 17:45

vaindil

7,93422 gold badges81 silver badges132 bronze badges

Collectives™ on Stack Overflow

CSS scroll not showing properly on mobile device

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related