Header on top of table that stays in place with scrolling

I'm facing an issue with a table that contains user-generated data. We are utilizing a plugin known as Clusterize, which allows us to smoothly scroll through large amounts of rows. However, the specific markup required for this plugin seems to be causing a problem on computers with scrollbars like those running Windows or OS X when using a mouse. The fixed table header does not display scrollbars, resulting in a mismatch between horizontal scrolling speeds and table overflow. I have provided a JSBin link demonstrating this behavior.

For computers with scrollbars, it is possible to enable them in the OS X preferences as well.

I have also included screenshots showing the issue - the first shows the lack of scrolling, while the second illustrates the problem when scrolling horizontally.

https://i.sstatic.net/fCQsQ.png

https://i.sstatic.net/VKNGq.png

I am open to any suggestions for potential fixes, whether they involve CSS, JavaScript, or any other solution. I have already dedicated a significant amount of time trying various approaches, but so far, I have been unable to find a satisfactory resolution.

javascriptjquerycssclusterize

Answer №1

A similar question has already been discussed on Clusterize's gitter platform. Feel free to visit https://gitter.im/NeXTs/Clusterize.js for more insights.

One solution is to create a separate table outside of the main table specifically for headers and ensure that it stays synchronized with the columns' width in the main area.

Check out this example: http://codepen.io/NeXTs/pen/ZbmWqg

var fitHeaders = (function() {
  var prevWidth = [];
  return function() {
    var $firstRow = $('#contentArea tr:not(.clusterize-extra-row):first');
    var columnsWidth = [];
    $firstRow.children().each(function() {
      columnsWidth.push($(this).width());
    });
    if(columnsWidth.toString() == prevWidth.toString()) return;
    $('#headerArea tr').children().each(function(i) {
      $(this).width(columnsWidth[i]);
    });
    prevWidth = columnsWidth;
  }
})();

var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea',
  callbacks: {

    // Update headers width when clusters change
    clusterChanged: function() {
      fitHeaders();
    }
  }
});

// Update headers width on window resize
$(window).resize(_.debounce(fitHeaders, 150));

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

What steps can be taken to resolve the issue with the background's placement?

https://i.sstatic.net/d3GEw.jpg There seems to be an issue with the border being hidden. I've tried adjusting the background-position variables, but without success. Here is a code example: * { margin: 0; padding: 0; } .container { ...

htmlcsssvgbackground

Steps to create a hover effect similar to that of a website (increasing grid size on hover)

Looking to create a hover effect for my boxes similar to the one on this website: I've examined the code of the website above and searched extensively for a similar feature without any luck. Could anyone offer assistance with this, please? ...

javascriptjqueryhtmlcsscanvas

Identifying HTTP Live Streaming on mobile devices

I am seeking a reliable method to determine if a mobile device can play HTTP Live Streaming (m3u8). Currently, I am using the following script for testing purposes: function isHLSEnabled() { var videoElement = document.createElement('video' ...

javascriptandroidmobilehttp-live-streaming

Minimize the width to display a scrollbar

Check out this page: where you'll find the same code snippet displayed twice - once through GitHub Gist embedding and the second using Jekyll's internal syntax highlighter Rouge. I'm currently working on styling the second code snippet to m ...

htmlcss

Creating unique appbars for different sections on my sidebar in ReactJs

I am trying to implement a responsive drawer and AppBar using material-ui (@material-ui/core). My goal is to display a specific AppBar for each section of the drawer. For instance, when the user navigates to the Timetable section, I want the AppBar label t ...

javascriptreactjsmaterial-uijsx

Determining the distance between points in an STL file with three.js

I'm currently working on a feature that requires users to click on two different points and calculate the distance between them. However, it seems like the clicks are occurring at random positions, resulting in inaccurate calculations. The calculati ...

javascriptthree.js3dstl-format

Stop automatic redirection after an AJAX Post request has been successfully completed

I have been trying to figure this out for a while now, but I am stuck and could really use some help. I need to stop my page from redirecting after an AJAX call is successful. Here is the code I have: <!doctype html> <html> <head> < ...

phpjquerymysqlajax

Having trouble establishing a connection between Atlas and Node.js

Here is the content of my server.js file: const express = require('express'); const cors = require('cors'); const mongoose = require('mongoose'); require('dotenv').config(); const app = express(); const port = pro ...

javascriptnode.jsmongodbmongoose

Creating a Circular Design with Text at the Center Using CSS

I'm facing a challenge with this https://i.sstatic.net/zQiF8.png The alignment of the icon is off. I would like to adjust it slightly upwards for better presentation. Below is my HTML (angular): // Icon component <div> <i><ng-c ...

htmlcssangular

Overlay a small image on top of a larger background image using canvas, then merge them into a single set of pixel

Is there a way to combine a smaller image with a larger background image on one canvas while allowing the smaller image to move around? I'll need to save the original background pixel data so that each frame can be redrawn with the overlay in its upda ...

javascriptgraphicshtmlcanvaspixel

Vertical Positioning of Tabs in Materialize CSS

My current challenge involves creating vertical tabs using materialize CSS, specifically in regards to positioning. The desired outcome is for the content to align at the same level when clicking on TAB 3. An example of the expected result can be seen in t ...

javascriptjquerycssmaterialize

Convert HTML code into a customized JSON structure

Is there a way to convert HTML into a specific JSON object? For instance This HTML page is well-structured (originally in markdown). I am interested in creating a JSON version of the different sections present on the page. In this scenario, every "h2" s ...

javascriptjqueryjson

Accessing a server-side ASP.NET method using jQuery

Attempting to trigger a server side method from the client side using jQuery. Here is my code snippet: Server side: using System.Web.Services; [WebMethod()] //[ScriptMethod()] public static void SendMessage(string subject, string message ...

asp.netjqueryweb-servicesasmx

How can I display an image next to an element when hovering over it?

Whenever I hover over a .tags element, I want to display the image next to it. Feel free to test this feature on this specific page. This is how I envision it should look when not hovering over any .tags cell (the cells in the final column all have the ...

htmlcss

What is the best way to position the label above the input text in a Material UI TextField component with a Start Adornment?

Struggling to figure out the right Material UI CSS class to style a reusable TextField component? You're not alone. Despite tinkering with InputLabelProps (specifically the shrink class), I can't seem to get it right. Here's the code snippet ...

cssreactjsmaterial-ui

Exploration into the Working Environments of JavaScript and Python

After executing JavaScript code (shown in the top-half) on link1 and python code (shown in the bottom-half) on link2, the diagram below was generated. My inquiry: I noticed that names foo & bar are already present in the global frame (highlighted in ...

javascriptpython

Achieving a fixed footer at the bottom with absolute positioning on a webpage

I'm facing an issue with positioning a footer on my webpage, which is made up of div sections that are absolutely positioned. The problem arises because using the bottom property fixes the footer to the bottom of the screen rather than the bottom of t ...

htmlcsscss-positionfootersticky-footer

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...

htmlcsstwitter-bootstrapbootstrap-modalbootstrap-5

Tips for making a multi-dimensional array using jQuery

Is it possible to generate a jQuery layout by using two separate each statements as shown below? arrar [ 'aaa'=>'ccsdfccc', 'bb'=>'aaddsaaaa', '1'=>[ 'three'=>'sdsds& ...

javascriptjquery

A guide on transforming HTML into a variable using JavaScript

Having trouble converting HTML to a JavaScript variable. This is my HTML code: <div onclick="openfullanswer('2','Discription part','This is the code part');"> I want to create this HTML code dynamically, but I&apo ...

javascriptjqueryhtml