Question

I want scrollview in JQuery Mobile to fit on the screen height.

I want three rows of items, and height of the items should be changed automatically when page resizes.

this is my scrollview container css code:

    .threeByThree {
        border: solid 0px black;
        background-color: #ccc;
        overflow: hidden;
        width: 100%;
        height: 80%;
        padding-top:10px;
        padding-left:10px;
    }

and this is the css code of elements inside scrollview:

    .square {
        width: 200px;
        height: 30%;
        border: solid 0px #333;
        text-align: center;
        line-height: 100px;
        font-size: 20px;
        margin: 10px 10px 10px 10px;
    }

Also page and content elements are this css code : height:100%.

my complete page code is here.

But it don’t work correctly. When I change the height of the browser (by resizing browser), sometimes a scrollbar appears, and elements are not resized correctly…

What is the problem?

Answer 1

You are using scrollview, which is no longer supported by Jquery Mobile. Try any of the following:

Overthrow – supposed to be the follow up to Scrollview
JQM iscrollview – another alternative