search

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customization and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
132 stars 89 forks source link

Dropdown in a dialog is showing dropdown content below dialog #4373

Open saikeys opened 6 days ago

saikeys commented 6 days ago

Hello, i've just starting using salt-ds components and new to react. I am seeing a issue with salt dropdown within a dialog showing dropdown content below dialog. Tried to set the z-index for dialog and a higher value for dropdown but doesn't seem to resolve. Please advise. No additional styling being used. Attached image related to the issue.

salt-ds/core version being used in 1.37.1

Thank you.

origami-z commented 4 days ago

@saikeys Thanks for using Salt. I can't reproduce the problem you're having, please provide some minimal reproducible code. See below my example https://stackblitz.com/edit/salt-template-ypjwsy?file=package.json,App.tsx

saikeys commented 2 days ago

Thank you. In our scenario we are using AG-Grid and based on row selection, button click would display a dialog with different components. In salt-ds/theme/index.css --salt-zIndex-popout is set to 1000. Setting the zIndex of dialog box to 900 resolved the issue.

origami-z commented 2 days ago

Thank you. In our scenario we are using AG-Grid and based on row selection, button click would display a dialog with different components. In salt-ds/theme/index.css --salt-zIndex-popout is set to 1000. Setting the zIndex of dialog box to 900 resolved the issue.

Dropdown's Option list uses --salt-zIndex-flyover and Dialog uses --salt-zIndex-modal. Which component are you using has --salt-zIndex-popout?