[data grid] Incorrect cell width calculation when using css border

DanielaDark commented 1 week ago

Steps to reproduce

Steps:

Open this link to live example: (https://codesandbox.io/p/sandbox/winter-cache-c9vdl3)

Either examine the css properties of cells or observe that the cell border (blue) on right side and bottom is not visible.

Current behavior

When adding css border to row and cell, cell width does not change. As a result cells are wider than provided width. In provided example Table width is 600px. Row has 1px border, the width of row is 598px (correct behavior). There are 2 cells in a row, each with 1px border. First cell width 200px (incorrect, should be 198px). Second cell has flex = 1 property, calculated width 398px (incorrect, should be 396px).

Expected behavior

When adding css border to row and cell, cell width is correctly calculated. Meaning cell width shrinks when cell border is added.

Context

Our Style-Guidelines require that both rows and cells have borders. Rows when they are selected and cells when keyboard focus is applied, as example for keyboard navigation. Having both properties active is in our case not unusual.

Your environment

npx @mui/envinfo

``` Browser used: Firefox System: OS: Windows 10 10.0.19045 Binaries: Node: 14.17.0 - C:\Program Files\nodejs\node.EXE npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: 130.0.6723.117 Edge: Chromium (131.0.2903.51) npmPackages: @emotion/react: ^11.10.6 => 11.11.4 @emotion/styled: ^11.10.6 => 11.11.5 @mui/base: 5.0.0-alpha.124 @mui/core-downloads-tracker: 5.15.18 @mui/icons-material: 5.11.16 => 5.11.16 @mui/lab: 5.0.0-alpha.125 => 5.0.0-alpha.125 @mui/material: 5.11.16 => 5.11.16 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/styles: 5.11.16 => 5.11.16 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: 6.9.2 @mui/x-data-grid-premium: 6.9.2 => 6.9.2 @mui/x-data-grid-pro: 6.9.2 @mui/x-license-pro: 6.9.0 @types/react: ^18.0.26 => 18.3.2 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: 4.4.3 => 4.4.3 ```

Search keywords: DataGrid width Order ID: 99555

Search keywords:

samuelsycamore commented 1 week ago

Is this what you're going for? (I added padding to make it easier to see the borders.)

https://codesandbox.io/p/sandbox/epic-hodgkin-z2gl5d?file=%2Fsrc%2Findex.tsx%3A20%2C26

Check out the MDN box-sizing docs for more info.

(I should note that this is the repo for Material UI, which is separate from the MUI X repo where the Data Grid lives; and we generally reserve GitHub issues for bug reports and feature requests. In the future, if you find a bug in the Data Grid, the MUI X repo is the best place to report it. If you need help with implementation then Stack Overflow is usually the best place to go—be sure to add the mui-x-data-grid tag to your post so others can find it.)

DanielaDark commented 1 week ago

Thank you @samuelsycamore for your fast response! No, unfortunately adding padding does not solve the problem. The problem is that the contents of the grid do not scale down correctly to fit in the grid. For me it looks like setting the "flex=1" property does not calculate correct cell width when row border is added. (sandbox) Example both borders: grafik Example only row border. grafik

P.S. Thank you for your hint about the second repo. Should I close this issue here and reopen it in the other repo?

samuelsycamore commented 1 week ago

Sorry for the confusion with the padding—I just added it to make it easier to see the borders with the box-sizing properties, not to solve the issue per se. But I see what you're saying now:box-sizing still doesn't resolve the issue on the right side of the container. Thanks for pointing that out.

Looks like this issue was moved to the correct repo so no action is needed there. I'll leave this for the Data Grid maintainers to take a look at.

michelengelen commented 6 days ago

Mmh, this works for me:

export const CustomThemeOptions = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        root: {
          border: "1px solid grey",
        },
        row: {
          boxSizing: "border-box",
          borderWidth: "0px 3px",
          borderColor: "blue",
          borderStyle: "solid",
        },
      },
    },
  },
});

Although I am not sure why we do not set box-sizing: border-box on a row ... might have something to do with the calculations for virtualization.

@romgrk do you know if this might prove to be a problem if we set that property?

mui / mui-x