On my iPad and iPhone (and other iOS devices - I don't have any Android/Blackberry/other devices to test on), the Appbar will stay in a fixed position on the screen, scrolling with the rest of the page and obscuring content.

It would be awesome if you could get the application toolbar to stay at the bottom on mobile browsers—but, failing that, it would also be great if there was a way to disable appbar for mobile devices (so it doesn't get in the way of content).

A couple references:

Comments

icecreamyou’s picture

icecreamyou commented
Priority: Normal » Minor
Status: Active » Postponed

That behavior is by design. However, I understand that on small screens it could be annoying.

Solving this problem will involve using a CSS3 media query to hide the Appbar for small screens, plus detecting the screen size in jQuery to avoid automatically updating the alerts list.

Patches welcome...

geerlingguy’s picture

geerlingguy commented

I will probably work on a patch in a few months... the first attempt will be simply to remove the appbar on mobile devices, but it would be really nice if we could get it to work properly, at least on the iPhone and Android, if not also Windows 7 Mobile.

icecreamyou’s picture

icecreamyou commented

I'm not sure what you mean by "work properly," but you would probably just need to override the "position: fixed" property on #appbar_container if you want the Appbar to only show up at the bottom of the page.

geerlingguy’s picture

geerlingguy commented

I mean that it would remain always at the bottom of the viewport... But on a mobile screen, it's pretty difficult to get that to work well, because of how tiny the bar becomes. Might be cool if there were a separate mobile appbar... But I get ahead of myself :-)

icecreamyou’s picture

icecreamyou commented

I'm not sure what you mean. As far as I'm concerned, there are two possible places the Appbar would make sense: fixed position at the bottom of the screen (so that it is always in the same place even when you scroll) or relative position at the bottom of the page (so that you only see it when it is at the bottom). The first should be the current behavior; I thought you were asking for the second on small screens.

It's impractical to make the Appbar bigger for small screens. It's too difficult to figure out what kind of system you're dealing with. On an iPhone, for example, making the Appbar large would just be obnoxious because the browser is typically used zoomed-in. Then you have tablet devices, where a normal-sized Appbar would be readable but the actual screen resolution is often no better than smartphones. A large Appbar would make sense on many feature phones, but it is too hard to detect what kind of device you are using to make that distinction accurately.

geerlingguy’s picture

geerlingguy commented

While this is true currently, I am hoping there will be a way to target any mobile browser in the future and give the browser the instruction "build this bar as a toolbar for the bottom of the screen..." You can sort of do this using javascript on iOS, but it's not consistent with other browsers.

For now, having it at the bottom of the screen is the best compromise, though.

geerlingguy’s picture

geerlingguy commented
Status: Postponed » Active

I've taken an initial stab at fixing this using javascript's browser platform detection - in the case of iPad or iPhone, the appbar's ID is changed so that appbar.js doesn't have a chance to set position:fixed, therefore display the appbar improperly.

jQuery(document).ready(function($){
  /*
    // Helpful debugging function (shows your device platform) 
    var platform = navigator.platform;
    $("#appbar_container").addClass(platform);
  */
  /* If mobile browser is detected, change ID of appbar */
  if (navigator.platform == "iPad" || navigator.platform == "iPhone") {
    $("#appbar_container").attr("id", "mobile-browser-appbar");
  }
});

Could this be done better? Yes, definitely... but this works for me right now :)

I imagine it would be even better if we could integrate something like iScroll (or something comparable that would be compatible with iOS, Android, etc.) so the appbar could actually be on the bottom of the viewport on a mobile/touch device.

Please see http://archstldev.com/node/649#comment-1146 for more background.

icecreamyou’s picture

icecreamyou commented
Status: Active » Needs review

I'm not going to accept vendor-specific code. The problem I am willing to address is not "this should look different on the iPhone," but rather "this looks awkward on small screens." The correct solution then is e.g. in appbar.css:

@media all and (max-width: 700px) {
  #appbar_container {
    position: relative;
  }
}

If you want specific behavior for your site with certain phone models, then that is up to your theme. (Of course, feel free to create a new skin for the Appbar that meets your needs as well.)

icecreamyou’s picture

icecreamyou commented
Status: Needs review » Fixed

Committed fix from #8 to dev. Can't test right now though, so would appreciate confirmation that it works.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

mwm’s picture

mwm commented

I'm running 6.x-2.x-dev-20110419 and still seeing problems on Android. Appbar stays at the bottom of the screen until I try to scroll past an element in my theme that uses position:relative and position:absolute for a popup, at which point it gets stuck to that part of the page. This happens on both a tablet (Pandigital Novel running Android 2.0) and a phone (Motorola Droid running 2.2). I tried to reproduce the problem in Firefox but wasn't able to.

One thing I noticed is that in Firefox, Appbar is always solidly positioned at the bottom of the screen during scrolling, but on Android it stays fixed to the page while scrolling, and jumps to the correct position at the bottom of the screen a second or so after I stop scrolling.

Given that both of these behaviors only happen on Android, I'm tempted to just blame its browser implementation, but I thought I'd mention them anyway in case others are seeing similar things on different platforms.

icecreamyou’s picture

icecreamyou commented

The first part sounds suspiciously like a browser issue. Can you reproduce in Opera Mobile?

The second part is definitely browser behavior, probably implemented for performance reasons or something. If you want to just set the Appbar to appear on the bottom of the page and not scroll with the current view, you can set it to position: relative in your theme. (The conclusion of this issue was to automatically do this for browser windows smaller than 700px wide.)

mwm’s picture

mwm commented

I'm able to reproduce both issues on Opera Mobile. What's strange is that Opera for Windows works perfectly, as does Firefox, Chrome, and Safari. If you need me to test anything don't hesitate to ask.