Css Footer Div Won't Hide

In this sample app I have a header , footer and the content div contains a table which holds various stats of some basketball players. I was having a problem with the footer when i

Solution 1:

I think the best solution for you is to remove the data-position="fixed" on the footer as suggested by others, but then also add some javascript that sets the min-height of the content div according to device height. That way for a small number of rows in the table, the footer still appears at the bottom of the screen. As the number of rows increases beyond the device height, the footer just gets pushed down remaining below the table.

Below, the SetMinHeight function calculates the minimum height for the content div that would fill the given device height. Then you call it on pagecontainershow and whenever the window resizes or the orientation changes:

$(document).on("pagecontainershow", function () {
    SetMinHeight();
});

$(window).on("resize orientationchange", function () {
    SetMinHeight();
});

functionSetMinHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

Updated FIDDLE

NOTE: for the calc to work, I had to remove the CSS zoom: #tbcontent{zoom:80%;}. If you really need the zoom, you may have to adjust the min-height calculation...

Solution 2:

The footer shouldn't be fixed:

http://jsfiddle.net/fmpeyton/L2vQ3/

Remove data-position='fixed' from this line:

Solution 3:

try this:

$(document).ready(function(){
    var tablerow = $("table tr").length-1;
    if(tablerow>20)
    {
        $(".ui-title").hide();             
    }
    else
    {
        $(".ui-title").show();     
    }
});