CSS footer element refuses to disappear

This sample application features a header, footer, and a content div that includes a table displaying various statistics of basketball players.

One issue I encountered was with the footer when there were many entries in the table. This caused the footer to cover up some of the other entries, as shown in the image below.

However, when I clicked in the middle, the footer disappeared, solving the problem momentarily, as seen in the picture below.

I am looking for a generic solution to detect if there are many entries in the table and hide the footer completely. Is there a way to address this issue efficiently? I am new to web development and not familiar with advanced CSS techniques.

Here is a link to the FIDDLE.

The code snippet below outlines my idea:


if the table contains more than x entries 
{
    hide footer
} 
else 
{
    show footer
}
javascriptjqueryhtmlcssjquery-mobile

Answer №1

In order to resolve your issue, one suggestion is to eliminate the data-position="fixed" attribute on the footer as recommended by others. Additionally, you can incorporate some JavaScript that dynamically sets the minimum height of the content div based on the device's screen height. This approach ensures that the footer remains at the bottom of the screen for a small number of table rows and adjusts accordingly as more rows are added.

Here is the SetMinHeight function which calculates the appropriate minimum height for the content div to utilize the available device height. This function is called upon page container show event, window resize, or orientation change:

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

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

function SetMinHeight() {
    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");
}

Check out the updated FIDDLE

NOTE: As a requirement for the calculation to work accurately, I had to remove the CSS zoom: #tbcontent{zoom:80%;}. If maintaining the zoom aspect is crucial, adjustments may be necessary in the min-height calculation...

Answer №3

To determine the number of rows in a table, you can use the following code snippet:

let rowCount = $('#myTable tr').length;

If the row count is greater than 5, you can hide the footer by adding a hidden class.

You can define a hidden class like this:

.hidden { visibility: hidden; }

Therefore, the logic would be:

if(rowCount > x) { $('.footer').addClass('hidden'); }

Answer №4

section, consider testing out this code snippet: 
$(document).ready(function(){
    var rowCount = $("table tr").length-1;
    if(rowCount>20)
    {
        $(".ui-title").hide();             
    }
    else
    {
        $(".ui-title").show();     
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through a PHP table, tracking your progress with a

I have encountered a problem that I need help with. I have been searching the internet for information on how to add a progress bar to my PHP code. Most solutions I found use the style method to display the progress percentage. In the image below, you can ...

phphtmlcss

React-Bootstrap Popup encounters overlay failure

While using the Tooltip without an OverlayTrigger, I encountered the following error: webpack-internal:///133:33 Warning: Failed prop type: The prop overlay is marked as required in Tooltip, but its value is undefined. The code snippet causing the issu ...

javascriptreactjsreact-bootstrap

Fullcalendar not displaying any events

As a beginner programmer, I'm struggling to make this code work (sourced from here). It's using MySQL to store data, and while I want to grasp all its components, my understanding of ajax and jQuery is still in its early stages. The code depends ...

jqueryajaxjsonfullcalendar

Troubleshooting Full Screen Problems with Three.js

Despite my efforts to troubleshoot, I am still encountering a frustrating issue with the Three.js API. Even after thoroughly studying the API documentation, browsing through StackOverflow questions, and using debugging tools like firebug and chrome's ...

javascripthtmlfullscreenhtml5-canvasthree.js

The React page fails to load on Ubuntu, yet it works perfectly on the local WSL

It's puzzling. The code that performs flawlessly on my personal computer, smoothly running without any hiccups, fails to operate as expected on an ubuntu server. Upon executing npm start, my local environment exclaims "Compiled successfully!" while t ...

javascriptreactjsubuntureact-hooksreact-router

What steps should I take to display a Material UI grid in React without triggering the warning about the missing unique key

In my current project, I am utilizing React and Material UI to display a grid. The grid's rows are populated from an array of data, with each row containing specific information in columns structured like this: <Grid container> {myData.map((re ...

javascriptreactjsmaterial-ui

Discover and modify the values of all the keys within nested JSON arrays and objects using JavaScript

I have a nested JSON data structure consisting of arrays and objects. I am looking to convert all the key values from English to Spanish using JavaScript, NodeJS, or AngularJS. { "firstrootkey" : [ //Array of 6 objects { //1st object ...

javascriptangularjsjsonnode.jsnested

Setting new query parameters while maintaining existing ones without deleting them in Next.js v13

"use client"; import { useCallback, useEffect, useState } from "react"; import Accordion from "../accordion/accordion"; import { useRouter, usePathname, useSearchParams, useParams, } from "next/navigation"; i ...

javascriptreactjsnext.js

Tips for building a custom error handling function specifically designed for parsing and handling errors in

Is there a way to reduce redundancy in my code, such as: let name = ""; try { name = data[" "][0][" "][0][" "][0][" "][1][" "][0][" "][1]["C"]; } catch (error) { if (error instanceof TypeError) { console.log("name TypeError"); } } I have consid ...

javascriptnode.jsjsonerror-handlingtypeerror

Using regular expressions to extract substrings from URL

I have different URL routes, such as var url = '/product' and '/product/create'. Is there a way to use Regex in order to extract only the route name like 'product'? ...

javascriptregex

What is preventing my accordion from closing completely?

I'm currently working on creating FAQ questions in an accordion format. However, I've encountered an issue where adding padding around the answer section prevents the accordion from closing completely. Removing the padding solves the problem, but ...

javascripthtmlcss

replace the tsconfig.json file with the one provided in the package

While working on my React app and installing a third-party package using TypeScript, I encountered an error message that said: Class constructor Name cannot be invoked without 'new' I attempted to declare a variable with 'new', but tha ...

javascriptreactjstypescript

Omit certain components from the JQuery ListNav plugin

I recently incorporated the Jquery plugin for record filtration. I obtained this plugin from the following link: After successfully implementing the plugin, I encountered an issue where it was counting the headings along with the alphabet filters in my co ...

javascriptphpjquery

What is the reason behind Bootstrap 5's decision to have the getOrCreateInstance() method automatically toggle the collapsible element upon creation?

Today was my first encounter with the Collapse feature in Bootstrap 5, and I have to admit, I am not a fan! Imagine a scenario where I have a collapsible element that is initially hidden, and a button to toggle its visibility, like so: <button class=&q ...

javascriptbootstrap-5

Utilizing ASCII art in React: A guide to incorporating textual designs into your

I'm having trouble displaying ASCII images correctly on my React app. I've tried various methods, but nothing seems to maintain the form when rendered in the browser. <Grid container id="terminal_banner"> <Grid item ...

javascripthtmlreactjsmaterial-uiascii-art

Issue with Vue.js: Difficulty sending an array of values to an endpoint

I am currently in the process of learning Vue in order to complete my project, which has a Java Spring backend. The endpoint I am working with expects an object with the following values: LocalDate date; Long buyerId; Long supplierId; List<OrderDetails ...

javascriptarraysvue.jsaxios

Do I need to make any changes to the application when adding a new couchbase node to the cluster

Currently, I am utilizing the Node.js SDK to establish a connection with a couchbase cluster. Despite this, in the Node.js documentation, there is no clear instruction on how to input multiple IP addresses (of cluster nodes) when creating the cluster objec ...

javascriptnode.jssdkcouchbase

Why is it that my for loop produces the accurate result, yet my forEach function fails to do so?

Hey there, I'm new to SO and seeking some guidance. I have a task where I need to create a function with two parameters - an array of strings and a string to potentially match within the array. I've developed two versions of the function: one us ...

javascriptarraysfor-loopforeach

Troubleshooting jQuery Ajax issues in a modularized environment

Having trouble getting this function to work properly. It's being called from a separate .js file. function TabLoaderAJAX(xurl, xdata) { var result = null; $.ajax({ type: 'POST', url: '/services/TabLoader.asmx/& ...

jqueryajax

Passing Data Between Page and Component (NEXT.JS + LEAFLET Integration)

I have recently started using Next.js with Leaflet maps and have encountered a beginner's question. I created a page in Next.js ( /pages/map/[id].jsx ) that utilizes a component ( /component/Map.jsx ). Within the page ( [id].jsx ), I fetch a JSON fil ...

javascriptnext.jsleaflet