1

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?

Mahdi Ghiasi
  • 14,873
  • 19
  • 71
  • 119

1 Answers1

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

frequent
  • 27,643
  • 59
  • 181
  • 333
  • Thanks! But please read this : http://stackoverflow.com/questions/11262644/horizontal-scrolling-with-mouse-wheel-with-overthrow-plugin – Mahdi Ghiasi Jun 29 '12 at 13:27