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 questions: Background and movement #50

Closed
billsaysthis opened this issue Feb 14, 2014 · 13 comments
Closed

Header questions: Background and movement #50

billsaysthis opened this issue Feb 14, 2014 · 13 comments
Labels

Comments

@billsaysthis
Copy link
Contributor

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
image

@mkoryak
Copy link
Owner

mkoryak commented Feb 14, 2014

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://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
Copy link
Owner

mkoryak commented Feb 14, 2014

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
Copy link
Contributor Author

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://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
Copy link
Contributor Author

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

@mkoryak
Copy link
Owner

mkoryak commented Feb 14, 2014

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
Copy link
Contributor Author

Here's a fiddle: http://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
Copy link
Owner

mkoryak commented Feb 14, 2014

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
Copy link
Contributor Author

Awesome!

@mkoryak
Copy link
Owner

mkoryak commented Feb 15, 2014

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://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
Copy link
Contributor Author

Terrific, thanks!

@mkoryak
Copy link
Owner

mkoryak commented Feb 17, 2014

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?

@mkoryak mkoryak closed this as completed Feb 17, 2014
@billsaysthis
Copy link
Contributor Author

Thanks, this works nicely!

@lock
Copy link

lock bot commented Dec 11, 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 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants