Menu icon Foundation
Responsive Table Duplicate Column Bug

Hi There,

First off, I’m a big fan of Foundation 5.

I am looking to implement a responsive table and it’s working as expected…however I noticed a bug that I can’t pinpoint and was wondering if someone could shed some light on the issue. Basically between 768px and 783px the “pinned table” with only column 1 showing is duplicated below the main table. Now the likelihood of a user noticing this is slim (depending on screen width), but I couldn’t find any forums that raise the issue.

Here is the link to the Demo page, shrink your browser window to see: http://zurb.com/playground/projects/responsive-tables/index.html

Here is a screenshot of your demo page to show what I’m talking about:

Responsive table

responsive tablesFoundation 5

Hi There,

First off, I’m a big fan of Foundation 5.

I am looking to implement a responsive table and it’s working as expected…however I noticed a bug that I can’t pinpoint and was wondering if someone could shed some light on the issue. Basically between 768px and 783px the “pinned table” with only column 1 showing is duplicated below the main table. Now the likelihood of a user noticing this is slim (depending on screen width), but I couldn’t find any forums that raise the issue.

Here is the link to the Demo page, shrink your browser window to see: http://zurb.com/playground/projects/responsive-tables/index.html

Here is a screenshot of your demo page to show what I’m talking about:

Responsive table
Tim Hartwick almost 4 years ago

Hi Kyle!

Thanks for pointing this out! I'm trying to replicate it on my machine and I'm not able to. I'm running OSX 10.10.5 with Chrome Version 45.0.2454.101 (64-bit).

What OS and browser are you seeing this?

Also, if you're feeling a little ambitious you can add an issue to our repo here: https://github.com/zurb/foundation

Thanks!

Kyle Keeling almost 4 years ago

Thanks for the quick reply Tim. The issue is consistent across all browsers for me.

OS:
Windows 8.1 Pro (64 bit).

Browsers:
Chrome Version 45.0.2454.101 m,
Internet Explorer 11.0.9600.18036
Firefox 36.0.1

Kyle Keeling almost 4 years ago

I added the issue to Github too.

Tim Hartwick almost 4 years ago

Thanks for the detailed info! We'll be taking a look at this bug.

Tim Hartwick almost 4 years ago

Hey Kyle! Sorry about the confusion, I linked you to the wrong Github repo!

Here's the repo for the responsive tables: https://github.com/zurb/responsive-tables

A PR or issue there would be great!

Sorry again for the confusion!!

Dan Williams almost 4 years ago

I'm experiencing this too. Plus also, that rogue column gets plonked as a second scrollable region within the first, at mobile resolution.

Kyle, did you manage to resolve your issue?

Cheers
Dan

Kyle Keeling almost 4 years ago

Hey Dan,

Still haven't found a solution. I haven't been looking though as I need to focus on designing and building right now. I didn't have the "second scrollable region" issue though. What devices/desktop have you had the issues on?

Dan Williams almost 4 years ago

Ok, I've figured out the second scrollable region bit, as this was because I had to instances initialising (one in a bundle I didn't know was there!) and your bit below is being caused by a mismatch between the @media query for the .pinned class and the js value. Check where your small-only breakpoint in px is using inspect and alter the js accordingly. There are 2 values in the responsive-tables.js;

 var updateTables = function() {
    if (($(window).width() < 642) && !switched ){
      switched = true;
      $("table.responsive").each(function(i, element) {
        splitTable($(element));
      });
      return true;
    }
    else if (switched && ($(window).width() > 642)) {
      switched = false;
      $("table.responsive").each(function(i, element) {
        unsplitTable($(element));
      });
    }
  };

Change the number values to the break point and your issue will go away.

Hope hat helpes