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

Overlay elements that originate from the grid's outlet div are incorrectly rendered #5674

Closed
tachojelev opened this issue Aug 21, 2019 · 3 comments · Fixed by #5702

Comments

@tachojelev
Copy link
Contributor

commented Aug 21, 2019

Description

Overlay elements that originate from the grid's outlet div are incorrectly rendered. This can be reproduced with the date picker for any date cell.

NOTES:

  • This issue is also reproduced for the Advanced Filtering Dialog (when dragged outside the grid) in its ongoing development: (issue, PR)
  • igniteui-angular version: 8.2.x
  • browser: any

Steps to reproduce

  1. Open the Grid search dev demo.
  2. Scroll to the DateCreated column so it is the first one in the view port.
  3. Open the date picker for the second row's DateCreated cell.

Result

Overlay element is rendered beneath certain elements that are outside the grid.

Expected result

Overlay element is rendered above all elements that are outside the grid.

Attachments

image

@damyanpetev

This comment has been minimized.

Copy link
Member

commented Aug 26, 2019

@simeonoff : We've talked briefly about this with @tachojelev and the issue as expected revolves around z-index. The grid needs to create its own stacking context exactly to keep content from jumping over other parts of the app and the default outlet is inside the grid for per-component theming. That makes it hard to overlay much of the external app content without additional work from the app dev (such as giving higher index to the grid or moving the offending outlets).
Either way, I think there's no universal solution that we can apply.

Right now, the only suggestion I had would be to move the z-index:0 away from the host and to each main header/body/footer so the grid outlet itself can be allowed to have higher index than the grid itself. That is currently at 10 with our default styles, which would at least overcome most of those common overlaps. Thoughts?

@radomirchev

This comment has been minimized.

Copy link
Contributor

commented Aug 27, 2019

Add issue for updating documentation.

@wnvko

This comment has been minimized.

Copy link
Contributor

commented Aug 28, 2019

We cannot remove z-index as this will break the stacking context. What we can do is set the grid's z-index to 1 instead of 0. This will allow whatever is shown in overlay through grid's outlets to be shown above elements around the grid.
In case anyone set higher z-index to elements around the grid he should set and appropriate z-index to the grid - this is clearly application scenario we should not cover.

wnvko added a commit that referenced this issue Aug 28, 2019
@wnvko wnvko referenced this issue Aug 28, 2019
2 of 14 tasks complete
wnvko added a commit that referenced this issue Aug 28, 2019
fix(grids): set grids z-index to 1, #5674
# Conflicts:
#	projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@wnvko wnvko referenced this issue Aug 28, 2019
2 of 14 tasks complete
wnvko added a commit that referenced this issue Aug 28, 2019
fix(grids): set grids z-index to 1, #5674
# Conflicts:
#	projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@wnvko wnvko referenced this issue Aug 28, 2019
2 of 14 tasks complete
PlamenaMiteva added a commit that referenced this issue Aug 28, 2019
kdinev added a commit that referenced this issue Aug 28, 2019
Merge pull request #5704 from IgniteUI/mvenkov/set-grid-z-index-to-1-…
…7.3.x

fix(grids): set grids z-index to 1, #5674
PlamenaMiteva added a commit that referenced this issue Aug 28, 2019
@PlamenaMiteva PlamenaMiteva referenced this issue Aug 28, 2019
2 of 14 tasks complete
Lipata added a commit that referenced this issue Aug 28, 2019
Merge pull request #5703 from IgniteUI/mvenkov/set-grid-z-index-to-1-…
…8.1.x

fix(grids): set grids z-index to 1, #5674

@Lipata Lipata closed this in #5702 Aug 29, 2019

Lipata added a commit that referenced this issue Aug 29, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.