1 of 1 people found this helpful
The header is an exception to Content and footer, it would be interesting to take a look at the CSS section:
and CSS/HTML architecture
Viewports vs postion:fixed
The position:fixed attribute does not exhibit the expected behavior in webkit-based mobile browsers. To ensure that the view is rendered at the appropriate resolution, mobile webkit-based browsers use a viewport to determine which content is displayed.
To understand how scrolling in a viewport differs from scrolling in a desktop browser, imagine a newspaper laid out on a desk. Take a large piece of paper, and cut a 480mm x320mm rectangle out of the center of the construction paper. When you lay the construction paper on top of the newspaper, you can only view a small portion of the content at any given time, and you must move the paper around to see additional content. Similarly, mobile webkit-based browsers render the entire page, and allow the user to move their 480x320px window over the top of the page, in contrast to dynamically rendering of pages found in desktop browsers. Since the entire page is rendered once, the browser is unable to regenerate the toolbar in the appropriate location. As a result, items with position:fixed are interpreted as being fixed relative to the page body, rather than the viewport, and from the user’s perspective, the position of the toolbar is not fixed.
Hi Jan Jansen,
JQM provides additional style for buttons in the header
This is the style which make the button in the header override the logo.
By writing some custom style you can move the button a bit towards the right side, so that the logo stays in the left corner.
<div data-role="header" data-position="fixed">
<img src="image" width="56px" height="40px" align="left" alt="image">
<a href="<%= url_for :controller => :Settings, :action => :do_sync %>" class="ui-btn-left" data-icon="refresh" style="left:58px;">Sync</a>
<a href="<%= url_for :controller => :Settings, :action => :login %>" class="ui-btn-right" data-icon="star">Login</a>
Hope this will help you.