DevExpress / devextreme-reactive

Business React components for Bootstrap and Material-UI

Home Page:https://devexpress.github.io/devextreme-reactive/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

.TableStubCell covers columns or rows on window maximise

jahglow opened this issue · comments

  • I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

  • React Grid
  • React Chart
  • React Scheduler

Current Behaviour

When the grid has multiple columns and they scroll horizontally, if the window is resized TableStubCell overlaps the columns and hides their content. same happens when the window gets restored to a smaller width and maximised again. The resizing strategy is nextColumn

Expected Behaviour

The expected result is the grid to respect container width change and recalculate column widths and visibility

Steps to Reproduce

  • Create multiple columns and a couple fixed in the beginning and end of grid
  • resize the window to allow only 30% of grid to be visible horizontally or vertically
  • maximise back to full width/height - the rows and columns are hidden behind white space (TableStubCell)

Screenshots

https://youtu.be/fFkUZ1qk8to

image

Environment

  • "@devexpress/dx-react-grid-material-ui": "^2.7.6",
  • devextreme-reactive: 2.7.6
  • react: 17.0.1
  • browser: Chrome latest
  • bootstrap: none
  • react-bootstrap: none
  • material-ui: 4.11

the problem was the wrapping component that had position: fixed !important though the table requires position:relative as per https://github.com/DevExpress/devextreme-reactive/blob/master/packages/dx-react-core/src/sizer.tsx#L155