Question

So I have a fixed header in JQM 1.1 like this:

—- Begin Edit —-

As per request, here is a more complete view of the page:

<div id="listPage" data-role="page" class="page-ovveride">

        <div data-role="header" id="applicationHeader" data-theme="b" data-position="fixed">
            <h1 class="ui-title" role="heading" aria-level="1">Mobile</h1>
        </div> 

        <div data-role="content" id="applicationContent">
             <ul id='ListTable' data-role="listview" data-inset='false'>  
                <!-- Placeholder for list table -->          
            </ul> 
        </div> 

        <div data-role="footer" id="applicationFooter" data-theme="b" data-position="fixed">
            <div id="navbar" data-role="navbar" > 
                <ul> 
                    <li class="ui-btn-active"><a href="#listPage" id="list" data-icon="grid" data-transition="none">List</a></li> 
                    <li><a href="#StuffPage" id="stuff" data-icon="star" data-transition="none">Stuff</a></li> 
                    <li><a href="#MaorStuffsPage" id="moar" data-icon="alert" data-transition="none">Moar</a></li> 
                </ul> 
            </div>
        </div> 

    </div> <!-- end list page -->

The page-ovverride class looks like this. For some reason, I think JQM was inserting a bunch of padding at the top and bottom which is causing issues. This is what the class looks like:

.page-ovveride {
    padding-top:0 !important;
    padding-bottom:0 !important;
}

and this is how I am populating the table

$List.append(
    $('<li>').attr('id', id).append(
        $('<a>').attr('href','#newPage').attr('data-transition', 'slide').append(
        $('<h3>').text(name),
        $('<p>').text(description)
    ))); 

and then after the loop:

$List.listview('refresh');

—- END EDIT —-

But for some reason, this is not making the thing appear fixed in ANY browser. I am looking at the 1.1 docs here, but that doesn’t seem to be working? Does anyone have any idea what’s going on? Let me know if you need to see any more info!

Thanks!

---

update: even when I take out the page-ovverride class, it still doesn’t work. What is going on!?

Answer 1

I figured it out. I was including a legacy file from one of my very early JQM implementations where I was using the theme roller, which included a file jquery.mobile.structure.css. This was ovverriding a lot of the styles and causing all sorts of whacky behavior. Hope that helps someone!