reactdatagrid icon indicating copy to clipboard operation
reactdatagrid copied to clipboard

Z-index problem between column context menu, React Bootstrap disabled button and other ReactDataGrid components

Open robozb opened this issue 2 years ago • 3 comments

Problem with disabled React Bootstrap button:

image

Problem with other ReactDataGrid:

image

It seems the z-index-ing doesn't work properly :(

  "dependencies": {
    "@inovua/reactdatagrid-community": "^5.8.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.3",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Best Regards: Bela

robozb avatar Feb 11 '23 05:02 robozb

It is interesting because It seems the context menu is on the highest position but nevertheless the second data grid covers it

image

robozb avatar Feb 11 '23 06:02 robozb

All the time the under grids covers the upper context menus:

image

robozb avatar Feb 11 '23 07:02 robozb

It is interesting because of in the "normal mode" the order of the components is ok:

image

When the context menu appears, the disabled React Bootstrap button'z z-index becomes higher than the menu:

image

robozb avatar Feb 12 '23 07:02 robozb