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
Body shrinking #276
Comments
Hey! I opened an issue a very long time ago trying to apply my plugin to your table. The problem with your table is this invalid markup: <colgroup>
<col>
<col class="this-browser-col">
</colgroup> the number of cols within a colgroup should reflect the number of columns in the table. my plugin uses colgroups internally to make the floated header's column widths match those of the table. It does support using an existing colgroup if it exists, this is what it is doing here. I am not sure why you have that colgroup there, but assuming its there for a good reason, you will need to update it have the same number of I remember that I had other issues where some kind of tooltip was floated over the TH of the hovered column, this doesnt appear to be happening anymore, so maybe you just need to fix this one thing |
I missed your comment about having the lib in there. ill play around with it. |
ok, i played around with it some more. There are few more issues:
#show-obsolete:checked ~ table .obsolete, #show-unstable:checked ~ table .unstable {
display: table-cell;
} when the headers are floated, now you have 2 tables in there. The floated headers no longer live in a table next to your checkbox. I like the trick of not using any javascript here, but this will longer work. You need to add js to set a class on the body - and I say the body because the plugin copies the table's classes to the new table which contains the headers so css like this will continue to work: body.show-unstable .the-giant-table .unstable {
display: table-cell;
} this css will apply to both tables.
var cols = $("tr.supertest:first>td:visible").length;
$("tr.category>td").attr('colspan', cols);
|
Thanks for looking into this! I removed colgroup; will try to fix other issues now too. |
Hey, so I pushed few changes under a "#float" flag — http://kangax.github.io/compat-table/es6/#float
This almost works now! Check it out. One artifact I'm still seeing is this: I'll look into it next. |
I think the headers not lining up issue has to do with some styles still not applying to the floated header and applying to the main table. The plugin expects that both tables are styled identically. also, I suggest making this change: table.floatThead = (function(floatThead) {
var created = false;
var fn = function() {
if (document.location.hash.indexOf('float') > -1) {
//not the best place for it, but this still needs to happen:
var cols = $("tr.supertest:first>td:visible").length;
$("tr.category>td").attr('colspan', cols);
if( created ) {
return floatThead.call(this);
} else {
return floatThead.call(this, "reflow");
}
}
};
return fn;
})(table.floatThead); i can look more at this later today |
Ah... I actually changed it later to |
Great, I tweaked your snippet and it's now working perfectly — compat-table/compat-table@24b0982 One last thing left (I think) — sorting :) |
Awesome! you basically need to reflow every time the dom in the table is modified so that the header can re-align itself. you probably need to do this at the end of the sort function. Another way to do it would be |
ok, i see whats going on here. I set overflow: hidden on the container that has the floating table, it makes sense to do this 99% of the time, in your case, you can remove it: .floatThead-container {
overflow: visible;
} but this still looks funny when you scroll. we can fix that by passing a but I think a better fix is to simply add an empty cell above the features row (when sorting), and then none of these hacks will be required. |
actually there is more here. when you sort you are doing something to all either destroy floatthead before sorting, or change https://github.com/kangax/compat-table/blob/24b0982784f1270df4fae8907a77bcef73d59d10/master.js#L460 to
|
ok, i debugged a little and see one more change you need to make, and perhaps add a bug for me. return floatThead.call(this, {
'headerCellSelector': 'tr:last>*:visible'
}); |
Phew, I think everything is finally fixed, but please double-check! http://kangax.github.io/compat-table/es6/#float Thanks for all the help! |
No problem, thanks for the table, i use it a bunch :) so one small problem, when you are in sort mode, and you scroll, you lose the % numbers. try this fix: return floatThead.call(this, {
'headerCellSelector': 'tr:last>*:visible',
'top': function(){
return $('#sort:checked').length * 15; //account for .num-features sticking above header
}
}); |
That one is tricky because there's no background behind % numbers and so even with offset they blend into the rest of the table during scroll. |
ok how about this, we move the percentages back down into the cells when the headers are floating: table.on("floatThead", function(evt, isFloating, $container){
$container[isFloating ? 'addClass' : 'removeClass']("floating-header");
}); .floatThead-container.floating-header sup.num-features {
top: 0;
} |
also, i noticed that you added |
Hm, good points! Would be super awesome if you could send a PR! :) Sent from my iPhone
|
sure, ill see what I can do tomorrow. btw, noticed another bug, when clicking on a header, that column is not sized properly. a reflow is needed somewhere... ill look tomorrow |
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. |
I'm seeing table's body shrink as soon as I apply
floatThead
. Here's the original state:and here's what happens after
$('table').floatThead()
:I'm testing this on ES6 compat table. I've included the lib temporarily so you can see the outcome by running
$('table').floatThead()
in a console.Any idea what's going on?
The text was updated successfully, but these errors were encountered: