Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header sync is off on a wide table #56

Closed
billsaysthis opened this issue Feb 22, 2014 · 12 comments
Closed

Header sync is off on a wide table #56

billsaysthis opened this issue Feb 22, 2014 · 12 comments

Comments

@billsaysthis
Copy link
Contributor

I have a table that can get very wide, dozens of columns and around 4000px wide, and am seeing issues.

  • Many column headers are never visible, due to the way the width of the generated floatThead-container div is calculated and the use of overlay: hidden.
  • Scrolling horizontally (by dragging the scrollbar, for example) often doesn't move the headers, scrolling vertically triggers that.

An additional issue, not with the header but the content, is that the rightmost content column is cutoff by the vertical scrollbar--that is, the rightmost 15px or so are overwritten by the scrollbar. On a Mac you may need to go into System Prefs | General and change the Show scrollbars setting to Always show in order to see this.

I've done minimal configuration, as shown here:

  var $table = $('.aggregate-records-table-view').find('> table');
  if ($table) {
    $table.css('table-layout', 'fixed');
    var scrollTop = $('#aggregate-records-viewer').offset().top;
    $table.floatThead({
        scrollingTop: scrollTop,
      scrollContainer: function() { return $('#aggregate-records-viewer'); },
      useAbsolutePositioning: false,
      cellTag: 'td'
    });
  }
@mkoryak
Copy link
Owner

mkoryak commented Feb 22, 2014

can i use the html from your other fiddle with this config to reproduce?

@billsaysthis
Copy link
Contributor Author

Not sure, though it is the same table in out app, but in this case the containing div maximum width is much less than the table width (about 1500px compared to 3800px in the case I was testing). If that fiddle doesn't enable you to reproduce I can try to update it with this set of data.

@mkoryak
Copy link
Owner

mkoryak commented Feb 27, 2014

Tried pasting the code into the older fiddle, but it the plugin didnt init. Can you provide an updated fiddle with this code that I can use to reproduce this issue?

@billsaysthis
Copy link
Contributor Author

Working on an update for you, other priority feature work getting in my way...

@mkoryak
Copy link
Owner

mkoryak commented Mar 5, 2014

no prob, i am pretty busy these days too

@billsaysthis
Copy link
Contributor Author

http://jsfiddle.net/Gp3yV/13/

But the thead isn't pinned, whether I have useAbsolutePositioning true or false.

mkoryak added a commit that referenced this issue Mar 6, 2014
version bump
@mkoryak
Copy link
Owner

mkoryak commented Mar 6, 2014

should be fixed now, see: http://mkoryak.github.io/floatThead/tests/issue-56/

@mkoryak mkoryak closed this as completed Mar 6, 2014
@billsaysthis
Copy link
Contributor Author

This seems to fix my issue.

I did run into something else but not sure if it's worth a ticket or down to how we do things. What do you think?

Our use case is showing search results but since some searches can take more than a few seconds we show partial results every few seconds. That is, we re-render the (Backbone.js) view.

So what I see is one 'layer' of floatThead for each render. I tried just calling . f l o a t T h e a d ( d e s t r o y ) a n d .floatThead('reflow') but this wasn't sufficient. Instead I check if it's been applied and if so remove the container and call reflow:

            if (this.floatTheadApplied) {
              $('.floatThead-container').remove();
              $table.floatThead('reflow');
            }

Then after applying floatThead I check if there's still an extra wrapper and unwrap (remove) if present:

            if ($('#aggregate-records-viewer').parent().parent().hasClass('floatThead-wrapper')) {
              $('#aggregate-records-viewer').parent().unwrap();
            }

@mkoryak
Copy link
Owner

mkoryak commented Mar 6, 2014

i am not sure by what you mean when you say 'i can see one layer of floatthead' can you attach a screenshot?

probably unrelated, a lot of your problems seem to stem from the fact that your css styles are attached like this:
#some-id thead td

this makes the tds become unstyled when they are floated because they are moved outside of #some-id. floatThead copies table's class on to the floated table with the expectation that your css looks like this:
table.some-class thead td

that also saves you from having to redefine all of your table styles for .floatThead-table.

Looking at your workaround, i have no idea how it would even work since floatThead depends on on those wrappers to calculate stuff.

You can provide another fiddle if you want, but this issue is starting to look more like something that should be solved in your code and not in plugin code, what do you think?

@helloworlder
Copy link

I'm using with datatables, and when I horizontally scroll to the right, then sort by one of the columns, the floating header moves into the incorrect position. Not sure if it's a related issue.

I tried $(window).trigger("resize") on the datatables fnDrawCallback callback which seems to address the issue. I think it triggers something in the floatTHead internals but really have had no time to find out.

@mkoryak
Copy link
Owner

mkoryak commented Feb 10, 2015

hello fellow cat avatar,
there is a chance that this plugin no longer supports the latest version of datatables becaused they changed their event api. The last version i tested it on was datatables 1.9.

There should be an event triggered on sort by datatables on the table instance. this plugin listens to that that event and reflows itself:

https://github.com/mkoryak/floatThead/blob/master/jquery.floatThead.js#L749

either the event no longer exists or my impl of isDataTables() is no longer working.

I also dont have time to build out a whole datatable install just to test this, so maybe we can meet half way - you provide the jsfiddle with your bug, and ill fix it. Ill create a separate issue for this

meet me here:
#158

@lock
Copy link

lock bot commented Dec 10, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Dec 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants