Skip to content
This repository has been archived by the owner on Jan 6, 2022. It is now read-only.

sidebar should not cover the other elements (z-index) in push and slide mode #186

Closed
RezaRahmati opened this issue Jul 22, 2019 · 3 comments

Comments

@RezaRahmati
Copy link

RezaRahmati commented Jul 22, 2019

Steps to Reproduce:

  1. Open this https://codesandbox.io/s/filtering-devextreme-data-grid-6zs9y?fontsize=14
  2. click on "Invoice Number" header filter icon

Results You Received:

filter panels opens in wrong position

image

Results You Expected:

filter panel opens in correct position

Note:

I solved the issue in my app by adding these to styles

::ng-deep .ng-sidebar.ng-sidebar--opened.ng-sidebar--push,
::ng-deep .ng-sidebar.ng-sidebar--opened.ng-sidebar--slide {
  z-index: 1;
}

@RezaRahmati
Copy link
Author

I am not sure if that changes is correct, because it was correct if the mode was "over", so that changes only needed for push and slide

@arkon
Copy link
Owner

arkon commented Jul 27, 2019

There's basically no winning since I'll never know what the sites that are using the component are like.

Regardless, users are free to override the z-index like the workaround you provided as well.

@RezaRahmati
Copy link
Author

@arkon I tried to create a branch and do pull request but I got access denied. I would suggest the below code

    .ng-sidebar {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      pointer-events: auto;
      position: absolute;
      touch-action: auto;
      will-change: initial;
      z-index: 1;
    }

    .ng-sidebar.ng-sidebar--over {
      z-index: 99999999;
    }

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

No branches or pull requests

2 participants