PhoneGap iOS enyo 1.0 , horizontal gray bar unexpectedly shown

edited February 2012 in Enyo 1.0

While testing PhoneGap iOS using Enyo 1.0. I noticed a gray horizontal bar on the bottom of the page that is appearing. This is start showing upon keyboard is open (on top of keyboard), but somehow will not disappear while the keyboard is gone.

Please refer to attached screenshot (and see at the bottom of the screenshot there is horizontal gray bar).
Any idea?



  • Which viewport meta tag are you using? For most platforms
    works best. webOS 2.x is the only one I know that requires
  • edited February 2012
    You forgot a comma after device-width.
  • thanks inta ~ sharp eye :)
    unfortunately i still get gray bar on the bottom of the page upon open keyboard.. don't you have any similar experience in PhoneGap enyo 1?
  • I think I saw that somewhere as a phonegap bug.
  • Hi isuhendro, we are using PhoneGap with Enyo 1.0 and do not have this issue. If feel comfortable posting your code somewhere to review I am sure we can figure it out.
  • hi , i checked the problem into more detail using weinre.

    first , i set the body background-color to red. then the "unexpected" bar color become red.

    it seems that the main "enyo component" that loaded by JavaScript defined in index.html was slightly move (~ relative to the body) every time the keyboard upon.
    i am able to manually fix it in weinre by setting margin-top of the body to 25px.
    but the next time I open the keyboard, i need to increase margin-top body to 50px, 75px, etc in order to fix it.

    in all sample applications in Enyo, I did not see BODY html being stylized, do we need to in order to avoid such effect?

  • Are you rendering your app into body or into a div?
  • edited February 2012
    Inside body..
    	new enyo.CanonSliding().renderInto(document.body);
  • edited February 2012
    This is somehow related to enyo-fit CSS. I did not use this CSS explicitly, but i think internally Enyo use it. And there is no problem while opening the application using iPad browser. Only when I packaged into (PhoneGap) native apps then the issue is coming.

    i fixed by modifying top & bottom position for enyo-fit CSS, and put dummy element on top and bottom of the page. Then thereafter hide and show as necessary using JavaScript, just to make it fit to be full height.
    such a monkey patching, isn't it? :)
Sign In or Register to comment.