Header questions: Background and movement

[billsaysthis]

Thanks for this plugin, it looks like it might solve a problem we have in a useful way.

A couple of questions I can't figure out from the docs/code:

• The contents that scroll up past the header are visible under/through the header, even if I set opacity=1; does the header needs to have a color other than white? (Image 1)
• The thead row moves a few (8-10?) pixels to the right when I scroll the body, but looking at the CSS of the #floatThead-table table I don't see any explicit styling to account for this. Image 1 shows that the body row cell contents are slightly to the left of the header row cell contents.

Note: The wrapper div for the table is absolutely positioned, and I'm passing useAbsolutePositioning: false in the initial options (passing true made the table invisible ;).

IMAGE 1

[mkoryak]

yes, you should style the floated header to have a white background if that is what it should have. An example of the css selector you can use is here:
http:https://mkoryak.github.io/floatThead/examples/bootstrap3/

Keeping the header and the cells aligned to the "real" table is very hard to do. Depending on the browser, sometimes you will see a 1-2 px shift somewhere. Yours screenshot looks to have about a 2px shift. Its almost impossible for me to give you a solution without seeing a working example of your table. What browser are you using?

I can give you some ideas about how to maybe make it work better:

• do not use deprecated css styles or tags
• do not use inline css styles on table cells
• if you have external css styles that target this table by id, change them to target it by class because the floated header will be inside of a table which copies the original table's class. This will make those selectors also apply to it.

your absolute positioning issue is probably the same issue as happening here:
#45

Ill will prioritize it next

[mkoryak]

Can you also please include a jsfiddle, of what your html looks like surrounding the table. I am interested in what the absolutely positioned wrapped div styles look like - if it resembles the same absolute positioning as in the fiddle in #45

[billsaysthis]

Thanks for the detailed answer. Setting the table to have a white background solves that issue.

As for the other bit, I'm using Chrome on OSX but see the same behavior on Firefox on OSX and Windows. None of the three bullet items is true in my case; the third was true but before posting this ticket I saw the problem and added selectors to manage it.

I'd be happy to get you a working sample but this is in the middle of a complex app (http:https://sumologic.com) so making one would be non-trivial ;)

I'll keep trying things to see if I can find a workaround, and let you know if something works.

[billsaysthis]

Just saw the second comment, let me see what I can do.

[mkoryak]

I understand, whittling down a huge app is as hard as building it sometimes. I assume my demo site works fine for you though? If you do get me demo of the bug, ill fix it.

Right now I want to find a good solution to that absolute positioning issue - because using useAbsolutePositioning: true yields better alignment in most situations.

[billsaysthis]

Here's a fiddle: http:https://jsfiddle.net/Gp3yV/5/ But I don't think I did enough to initialize the floatThead because I can't make it work. And yes, the demos work for me on your site.

Manually changing the calculated left position of the floatThead-container by -2 fixes the issue ;) May be a coincidence but there are two 1px wide borders to the left of the table. Does you code perhaps fail to take borders into account when calculating the left value?

[mkoryak]

Thanks, you were missing underscore, i fixed that. I see the issue and will see if i can get a fix in for the next minor release today :)

[billsaysthis]

Awesome!

[mkoryak]

I figured out the alignment issue, it was cellpadding='0' cellspacing='0' on the table which didnt get copied over to the floated table. I need to have more time to test before cutting a new version, but the latest code which will be making its way into that version is here: http:https://jsfiddle.net/Gp3yV/8/

i also have a temp fix for the absolute positioning bug where i now add a class to a wrapper div i create. This allows you to style that div to work with absolute positioning:

.floatThead-wrapper {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

its also in that fiddle. Ill probably push the next version early next week

[billsaysthis]

Terrific, thanks!

[mkoryak]

pushed out a new version where this is fixed. let me know if you have other issues.

Also, can i include sumologic in the list of sites that use this plugin? I assume its going to be used in a non-publicly accessible page right?

[billsaysthis]

Thanks, this works nicely!

[lock]

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.