CODEWITHSUNDEEP
jquerycsshtmljquery-mobile
gabaum10
gabaum10

Reputation: 3827

jquery mobile fixed header/footer not working

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!?

Upvotes: 0

Views: 7052

Answers (4)

xgretsch
xgretsch

Reputation: 1423

Here's another possible cause: I had a problem of a fixed header that wasn't working for a page with dynamically added content. It turned out that if the page content was initially shorter than the window, jQueryMobile was adding a class "ui-fixed-hidden" to my header, which was not being removed when the content grew to be larger than the window.

I cured the problem by adding the following line of code,immediately after writing the content into a div on the page called resultsdiv:

    resultsdiv.parents('.ui-page').find('.ui-header').removeClass('ui-fixed-hidden');

It's a horrible sleazy hack, but has worked so far.

Upvotes: 0

Ulhas Tuscano
Ulhas Tuscano

Reputation: 5620

Try this:

<div id="listPage" data-role="page" class="page-ovveride" data-fullscreen="true">
.
.
.
.
</div>

Upvotes: 0

gabaum10
gabaum10

Reputation: 3827

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!

Upvotes: 3

ember arlynx
ember arlynx

Reputation: 3291

Works for me: http://jsfiddle.net/XRKcX/1/. Perhaps you are forgetting to include something?

Upvotes: 0

Related Questions