search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
166 stars 42 forks source link

Filter for Datagrid in cds-modal is obscured #131

Open grahamford opened 2 years ago

grahamford commented 2 years ago

Describe the bug

We've been moving over the Cds versions of components but I have a need to display some data in a Datagrid. When I have a Clr Datagrid in a Cds Modal and column filters are enabled, the filter boxes are displayed behind the modal content and are inaccessible.

I've tried adding a high z-index to the filter with the following but although the filter is now visible, you can't enter text into the input box. 

.datagrid-filter {
  z-index: 1000001;
}

How to reproduce

Stackblitz: https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-thpyqk?file=src/app/app.component.ts

Steps to reproduce the behavior:

  1. Click on the button titled "Click Me"
  2. Click on the filter icon in the header of "User ID"
  3. The box that should display the filter input box displays behind the modal.

Expected behavior

The filter input box should appear in front of the modal content and the input box should accept text input.

Versions

Clarity version:

Framework:

Framework version: Angular 12, 13

Device:

Jinnie commented 2 years ago

The cds modals use different z-index values, compared to clr-modals. I agree we should synchronize both systems. I am transferring this bug to the vmware-clarity/core repo.

ashleyryan commented 2 years ago

clarity-ng has a dependency on Core and not the other way around, so Core is never going to care about NG's z-indexes.

HOWEVER, I think Core has it's own positioning logic (that doesn't use z-index if I remember correctly) and we obviously need to make sure it more broadly works with positioned elements with zindexes