3

I had previously created a front facing page with a table that has a sticky header using Drupal's built in sticker header js.

Now, we are in the process of making that site responsive. To handle the tables we have set an overflow: scroll on the table container to create a horizontal scrollbar for the table.

However, the sticky header (because it is position fixed) does not scroll.

How can I implement Drupal's sticky header in a responsive site.

Code that generates the table:

$block['content'] = theme_table(
  array(
    'header' => $table_headers,
    'rows' => $table_rows,
    'attributes' => array(),
    'caption' => '',
    'empty' => '',
    'colgroups' => array(),
    'sticky' => TRUE,
  )
);
3
  • It's really hard to tell without seeing the actual site or any code at all, but judging from what I see, you could change your table header to be "position: absolute;" and make the table's parent element "position: relative". That way, it will take the parent as a reference instead of the window.
    – typologist
    Nov 13 '15 at 19:40
  • Tried that, no go. And it's the default sticky header set up, no customization (other than colors and fonts). Nov 13 '15 at 20:45
  • Can you add a screenshot of that page or some code? Honestly it should work but you might have some css overwriting the sticky header.
    – GwenM
    Nov 23 '15 at 11:17
4
+150

You may need to attach some additional custom JavaScript to do this. Take a look at the "correct" answer to a similar question.

EDIT: I've put together a working version of this page - which contains a working modification of the tableheader.js to solve the problem of sticky headers not working when scrolling horizontally.

I've created a module with a new theming function that can be used as an alternative to Drupal's table_theme to allow for scrolling sticky headers.I also created an example module. It's working great, but may need some tweaking for your case. The modules are not documented (I'll do that later) but you can look at the example. It's self explanatory. It's on GitHub, here.

I hope this is useful.

10
  • Can you provide a working example using the Drupal sticky header? Nov 19 '15 at 17:41
  • I'll try to get to this tonight.
    – argiepiano
    Nov 19 '15 at 17:53
  • Is this table created by a View? Is it hard-coded in the template file? As @typologist mentioned above, it's hard to provide an answer without seeing the actual site. IF this table is produced by Views, and the Sticky headers option is selected in the Format Settings for the View, notice that Views produces two separate <table>, one for the headers and one for the content, one with class sticky-header and the other one views-table. Is your overflow: scroll acting on both classes?
    – argiepiano
    Nov 19 '15 at 19:17
  • I've updated the question Nov 19 '15 at 19:38
  • I don't think I'll have time to look at this for a few days, but this post may help you. drupal.org/node/1307128. This person rewrote tableheader.js to solve your problem. I would also look at the second answer there, that seems to indicated that the changes in the first answer are not necessary, and shows code that binds a handler defined in tableheader.js to the scroll event of the div wrapper around the table. Good luck...
    – argiepiano
    Nov 20 '15 at 3:03
1

Please have a look at Responsive Tables module. I think this is what you are looking for.

Some more details about this module (from its project page):

Adds a library to allow tables to function better in responsive layouts.

You can manually add the library to any table on the site. You also have the option of using the Better Views Tables module to configure the responsive table controls through the Views UI.

0

make sure you have the corresponding javascript file on the site:

drupal_add_js('misc/tableheader.js');

actually, theme_table should will do that, but there are some circumstances you need to do it yourself. (depending on where theme_table is called)

2
  • the sticky header is working, but once we add the overflow scroll on the table, it does not. Nov 19 '15 at 23:54
  • sorry - got it wrong ..
    – rémy
    Nov 20 '15 at 11:25
0

Please try following code in your custom theme javascript.

(function ($, Drupal) {
    /*global jQuery:false */
    /*global Drupal:false */
    "use strict";
    /**
     * Fix tableheader.js Sticky Table headers overflow-x:scroll issue.
     */
    Drupal.behaviors.tableheader = {
        attach: function (context) {
            var $table = $(".table-responsive");
            if ($table.length == 0) {
                console.log($table.length);
                $table = $("html");
            }
            var $header = $(".sticky-header");
            var $header_left = parseInt($header.css('left'));
            $table.on("scroll", function (e) {
                $header.css('left', $header_left-$table.scrollLeft());
            });
            $(window).on("scroll", function (e) {
                $header.css('left', $header_left-$table.scrollLeft());
            });
        }
    };
})(jQuery, Drupal);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.