Comments (4)
Hey @lukaskoeller and thanks for raising this.
It seems as if the footer has no background color defined by default.
using this makes it work:
sx={{
blockSize: 629,
[`& .${gridClasses.footerContainer}`]: {
backgroundColor: 'white',
},
}}
from mui-x.
Noted: this is just a workaround and we should look into fixing this.
cc @cherniavskii
from mui-x.
Hey @lukaskoeller and thanks for raising this. It seems as if the footer has no background color defined by default.
using this makes it work:
sx={{ blockSize: 629, [`& .${gridClasses.footerContainer}`]: { backgroundColor: 'white', }, }}
Thanks @michelengelen for the workaround. Though, I noticed that for both the v6 and the v7 reproduction, the last row in the table is then always hidden behind the table footer. I would expect this one to be visible as any other table row. Isn't it something that needs to be fixed too?
from mui-x.
@michelengelen I tried to get a more similar reproduction to our production application. I noticed that it still looks off, even with your workaround applied:
Actual
There's a bottom border line and the last visible row is cut of
Expected
- No bottom border line
- All 7 items, not only 6 are visible
- The last row (in this case the 6th) is not cut off vertically
Reproduction: https://stackblitz.com/edit/react-z2fhwt-71kzsu?file=Demo.tsx
![Screenshot 2024-07-18 at 08 31 34](https://private-user-images.githubusercontent.com/10390627/349839864-35a5203f-03e8-43e0-beb4-f649dbb229e0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NTA2OTksIm5iZiI6MTcyNDU1MDM5OSwicGF0aCI6Ii8xMDM5MDYyNy8zNDk4Mzk4NjQtMzVhNTIwM2YtMDNlOC00M2UwLWJlYjQtZjY0OWRiYjIyOWUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDAxNDYzOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTcyZjIwMDgwNDg2YmFiY2ZiODMyMzE1ODYxMjUzZGUxNTk0YTg2NWYxNGZhZWUyNTYzNzg1NDY1ZjJkYTAwOTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FoYMlUGYxL_592lp-GMC8aYGUR8XBTEgwfpiP4Q7EBc)
from mui-x.
Related Issues (20)
- [data grid] Using grid filter with `{ value: -1, label: 'All' }` pagesize option shows all rows minus 1 HOT 1
- [tree view] Add `getItemChildren` HOT 1
- [question][BarChart] How can I fix the BarChart tooltip on top of the bar? HOT 2
- Filtering and Sorting Not Working Correctly for Text Columns in DataGrid Using renderCell HOT 3
- [pickers] Handle `TextField` slots with `@mui/material@6`
- [data grid] Selection Column has no aria-label for screen reader a11y HOT 5
- [data grid] In column filter dropdowns HOT 2
- [data grid] Overlays aren't sticky in RTL mode HOT 1
- [x-license] MUI Missing license key HOT 1
- [charts] line charts not rendering on page load, only on mouse over HOT 3
- DatePicker format issue when format='DD/MMM/YYYY' UI shows "DD/MMMM/YYYY" HOT 2
- [tree view] Cursor navigation interferes with browser shortcut keys HOT 1
- [data grid] State change in component when `groupingColDef` and `pinnedColumns` leads to mis-render in Group column HOT 5
- [data grid] Warning: A props object containing a "key" prop is being spread into JSX HOT 2
- [data grid] Update `indeterminateCheckboxAction` default value
- [data grid] How to setup clickable value (like links) in input field HOT 1
- [charts] Generate chart images on the backend / from an HTTP API
- [charts] Missing `themeAugmentation` in pro plan HOT 1
- Not getting the data for target values in itemContent callback for customizing tooltip
- [charts-pro] Dependency local workspace reference causes runtime errors on ``createAxisFilterMapper``
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.