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

Frozen columns are shifted even if no scrolling is possible #16

Open
puehringer opened this issue Oct 17, 2019 · 2 comments
Open

Frozen columns are shifted even if no scrolling is possible #16

puehringer opened this issue Oct 17, 2019 · 2 comments
Assignees
Labels

Comments

@puehringer
Copy link
Contributor

puehringer commented Oct 17, 2019

  • Release number or git hash: v1.1.2
  • Web browser version and OS: Chrome v76.0.3809.87

Steps to reproduce

  1. Set disableFrozenColumns: false in your LineUpFlags configuration
  2. Set a column to frozen
  3. Make sure your ranking does not scroll horizontally

Observed behavior

Even if the ranking is not shifted (no le-shifted class), the shift per column style is applied if they are frozen.
The frozen columns are implemented by setting left: ...px, which only works because le-shifted is active on the main lineup engine, as the style position: sticky; is applied to the column. If le-shifted is not present, the left: ...px is still applied, offsetting the column even if no shift is required. This causes a hiding of the column behind the others if no scroll is possible/the scrollbar is on the very left.
Peek 2019-10-17 12-59

Additionally, it seems that the margin of 5px which is usually applied to separate each column is not included in the calculation.

Expected behavior

  • Apply the left: ...px only if le-shifted is present.

Possible Solution

The following lines cause the issue (I think): https://github.com/lineupjs/lineupengine/blob/v2.1.0/src/style/GridStyleManager.ts#L165-L173

When calling this.updateRule, one could prepend the CSS selector for le-shifted, such that this rule only applies if it is present. This would cause the left: ...px to not apply on non-shifted rankings.

@puehringer
Copy link
Contributor Author

For now, I fixed it in my app by applying this style:

.lineup-engine:not(.le-shifted) .lu-header.frozen {
  left: 0px !important;
}

@puehringer
Copy link
Contributor Author

For lineup#v4, the CSS class was renamed:

.lineup-engine:not(.le-shifted) .lu-header.le-frozen {
  left: 0px !important;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants