CODEWITHSUNDEEP
cssjquery-mobilemobilehtml
vaindil
vaindil

Reputation: 7846

CSS scroll not showing properly on mobile device

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>

Upvotes: 1

Views: 4026

Answers (3)

vaindil
vaindil

Reputation: 7846

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).

Upvotes: 0

advermark
advermark

Reputation: 231

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%; }

Upvotes: 0

klewis
klewis

Reputation: 8350

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

Upvotes: 1

Related Questions