2 Replies Latest reply on Apr 19, 2013 4:48 AM by Kutir Mobility

    Logo in header problem



      I want to implement an logo in the header and in the footer.

      The logo in the footer was no problem, but in the headers the button sync is over my logo. See attached picture.

      It looks like the data-role header has a completely other css style than the footer.


      Can someone help me with this problem?



      My code:



        <div data-role="header" data-position="fixed">

          <img src="image" width="56px" height="40px" align="left">

          <% if SyncEngine::logged_in > 0 %>

            <a href="<%= url_for :controller => :Settings, :action => :do_sync %>" class="ui-btn-left" data-icon="refresh">Sync</a>

            <a href="<%= url_for :controller => :Settings, :action => :logout %>" class="ui-btn-right" data-icon="star">Logout</a>

          <% else %>

            <a href="<%= url_for :controller => :Settings, :action => :login %>" class="ui-btn-right" data-icon="star">Login</a>

          <% end %>



      <!-- Footer -->

        <div data-role="footer" data-position="fixed">   

           <img src="image" width="56px" height="40px" align="left">

           <a href="#" data-role="button" class="ui-btn-left" data-icon="delete">Remove</a>

           <a href="#" data-role="button" class="ui-btn-left" data-icon="plus">Add</a>


        • Re: Logo in header problem

          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





          in addition:

          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.

          1 of 1 people found this helpful
          • Re: Logo in header problem
            Kutir Mobility

            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.

            .ui-header .ui-btn-left{

            position: absolute;

            left: 10px;

            top: .4em;


            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.





            Kutir Mobility