CODEWITHSUNDEEP
cssjquery-mobilecordovaios7
Riccardo Cipolleschi
Riccardo Cipolleschi

Reputation: 237

Weird scrolling with iOS 7, PhoneGap and jQuery Mobile

I am developing a very simple app, with a list of element, inside a page. I am using PhoneGap with jQueryMobile. To make a comparison, I used both the jQuery Mobile Listview and a custom implementation of the list. Both the implementations share the same problem.

I think that an image is better than a thousand of words...

scrolling past the header

As you can see in the image, the header is below the status bar, fixed and in foreground. However, when I scroll the list, the elements override the phone status bar. What I would like to have, is that the elemnts "disapear" under the header, like in common iOS list.

How can I achieve this?

I put the relevant part of the CSS below.

[data-role=header]{
  z-index:100;
  width:100%;
  position:fixed;
}

/*
 * iOS7 NavBar Margin
 */
.myMarginClass
{
  margin-top : 20px;
}

.myMarginClass > [data-role=header]{
  z-index:100;
  width:100%;
  position:fixed;
}

.myMarginClass > [data-role=content]{   
  position:relative;
  top:40px;
}

The relevant HTML

<div data-role="page" class="myMarginClass" id="docListPage">
  <div data-role="header">
    [...]
  </div>

  <div data-role="content">
    [...]
  </div>
  <div data-role="footer" data-position="fixed" data-tap-toggle="false">
    [...]
  </div>
</div>

Thanks for your help. Rik.

Upvotes: 0

Views: 1375

Answers (1)

Red2678
Red2678

Reputation: 3287

Are you using Cordova/Phonegap 3.0? If yes this is a known bug, go to 3.1

http://coenraets.org/blog/2013/09/phonegap-and-cordova-with-ios-7/

PS - See here for a possible fix:

https://groups.google.com/forum/#!topic/phonegap/nNUgSOfpt5Q

Upvotes: 2

Related Questions