How does one get a fixed header to stay at the top of the page?

Asked 17/6, 2013 at 15:13 Answered 13/9, 2021 at 12:6

The fixed header will not stay at the top of the page for me. It sits on top of a page that has several number inputs that were added via javascript. As the user fills out these inputs the header disappears as expected. However, the header will reapear in the middle of the page if the user taps out of the text boxes. The user has to tap twice to get it to move back to the top of the page.

/Edit Here is another piece of important info. This is happening when I use the next button to move to the next text box as I fill in the information.

I have create a jsfiddle example of my page at http://jsfiddle.net/7PZPy/1/ . It won't show you the bug, but it should give you a good idea of what the page is about. */

This is a phonegap application running on iPhones and iPads. I am using JQM 1.3.1.

My research has caused me to try using the jquery full page mode and a fix position via CSS. I have also tried removing everything that was not inside of the h1 tags. Alas, the header moves up and down the page as long as the data position is set to fixed. My html is below. Please help.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" href="css/jquery.css" />
        <link rel="stylesheet" type="text/css" href="css/ims-theme.css" />


        <script type="text/javascript"  src="js/jquery.js"></script>
        <script type="text/javascript"  src="js/jquery-migrate.js"></script>
        <script type="text/javascript"  src="js/jquerymobile.js"></script>
        <script type="text/javascript" src="cordova-2.6.0.js"></script>
        <script type="text/javascript" src="js/WaitingDialog.js"></script>
        <script type="text/javascript" src="js/UniqueIdentifier.js"></script>
        <script type="text/javascript" src="js/iti.js"></script>
        <title>IMS Field Support</title>
    </head>
    <body>
        <div data-role="page" id="invPage">
            <script type="text/javascript" src="js/inventory.js"></script>
            <div data-role="header" data-position="fixed">
                <h1>Inventory</h1>
                <div id="divAlert" style="display:none">
                    <a href="resolve.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true" class="ui-btn-right" >Alert</a>
                </div>
            </div>
            <div id="inventoryContent" data-role="content">
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="inventory.html" data-icon="grid" class="ui-btn-active ui-state-persist"> Inventory</a></li>
                        <li><a href="technician.html"  data-icon="edit" onclick="cacheInventoryPage();">Technician</a></li>
                        <li><a href="logout.html"  data-icon="delete" onclick="cacheInventoryPage();">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Yip answered 17/6, 2013 at 15:13 Comment(0)

The data-position="fixed" is used to make those smartphone-like headers that disapear with some clicks on body or some other events i dont care,

for what you want, you can just style your header with css with something like:

#myheader{
 position: fixed !important;
 width:100%;
 top: 0px;
}

Works like a charm

PS: The !important overwrites any jquerymobile attempt to change position attribute, it may not be needed

Fitzpatrick answered 17/6, 2013 at 15:32 Comment(6)

u can also add width: 100% too if ur having any problem with header width – Fitzpatrick 17/6, 2013 at 15:36

Its not working for me, but maybe I left an important piece out. This problem is happening if I use the next button to move from one text box to the next one. – Yip 17/6, 2013 at 15:49

try to remove your <div id="divAlert"> , i think it's messing up the header right-button – Fitzpatrick 17/6, 2013 at 15:55

Thanks Enoque. Removing that div did not help. I have created a jsfiddle with my code as you reqeusted. It was changed to put dummy values instead of data returned from a web service, but that is it. The link is jsfiddle.net/7PZPy/1 – Yip 17/6, 2013 at 16:26

sup, sorry for delay didnt saw comment, notice that there u tryed to style a div with tag css, use style, + it wouldnt work if you keep the data-position="fixed",, here's it fixed: jsfiddle.net/7PZPy/8 – Fitzpatrick 17/6, 2013 at 21:43

Enoque, don't worry about your timing. I appreciate that you are trying to help regardless of the timing. I am sorry about the bonehead move of css instead of style. I did correct it, but the behavior is still the same. You can see my update at jsfiddle.net/7PZPy/10 – Yip 18/6, 2013 at 13:29

Had you tried to also include the all three attributes to your header? It works for me with all these specified:

data-position="fixed"
data-tap-toggle="false"
data-update-page-padding ="false"

Here is the code:

<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>

Hope this help!

Lorikeet answered 18/6, 2013 at 3:27 Comment(2)

Ming, thanks for your suggestion. I replaced my div header with your suggestion. However, it did not resolve my problem. – Yip 18/6, 2013 at 13:34

May need others to help in here! – Lorikeet 18/6, 2013 at 20:20

In my case, I fixed this bug by removing "top: 0" for my "position: fixed"

And it's fix! Weird I know...

Citronellal answered 13/9, 2021 at 12:6 Comment(0)

Recommended topics

Hot tags