Comments (9)
Hi @romgrk just to mention that adding border to the main in v7 works as expected :)
from mui-x.
@romgrk could you have a look at this please? Thanks! 🙇🏼
from mui-x.
Have you tried setting the border on the top/bottom elements instead of the virtual scroller? The scroller needs precise dimensions and the border affects them.
Also are you planning to migrate to v7? We're about to release it and the beta version is already available. It modifies the DOM structure substantially so if you plan to migrate, the solution for v6 would probably not work in v7.
from mui-x.
Have you tried setting the border on the top/bottom elements instead of the virtual scroller? The scroller needs precise dimensions and the border affects them.
That's what I did and it seems more a hack rather than solution bc when quick filter is applied and there is 1,2 elements displayed & virtual scroller becomes half empty without borders it doesn't look right:
![Screenshot 2024-02-26 at 17 09 07](https://private-user-images.githubusercontent.com/64642760/307881890-a3ca9215-8cc6-4b14-8e4a-b784c2c33a16.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkxOTU1NTksIm5iZiI6MTcxOTE5NTI1OSwicGF0aCI6Ii82NDY0Mjc2MC8zMDc4ODE4OTAtYTNjYTkyMTUtOGNjNi00YjE0LThlNGEtYjc4NGMyYzMzYTE2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI0VDAyMTQxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM0N2M5Y2E0Y2E2Njc1NTc5NmVmZTg0YWVmYWE0MGE0OGYzMGVhODg4OGQ5ODM2OTljY2MyYjVlYTYyN2ViNDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.GH7XHcKFie1NNkmRTDokb9Tru4g40TI14iCrXUu-G78)
Also are you planning to migrate to v7? We're about to release it and the beta version is already available. It modifies the DOM structure substantially so if you plan to migrate, the solution for v6 would probably not work in v7.
Wdm solution for v6 wouldn't be working with v7? I'm premium user and we will upgrade it to v7 if there is no major breaking changes.
from mui-x.
Wdm solution for v6 wouldn't be working with v7?
It means that the DOM layout has changed and the solution for v6 might not work for v7.
If you're planning to stay on v6, the best suggestion I can offer is to use absolutely positioned ::before
and ::after
pseudo-elements on the virtual scroller to simulate borders on the right & left. We can't easily support borders at that location in the DOM because it modifies the space available for the rows.
Alternatively, you can set the border on the full grid. In that case, you could try to hide the border in the header & footer by using pseudo-elements over those two elements, but you'd need to remove the toolbar and implement the toolbar components yourself outside the grid.
from mui-x.
Wdm solution for v6 wouldn't be working with v7?
It means that the DOM layout has changed and the solution for v6 might not work for v7.
Oh thats sucks.
If you're planning to stay on v6, the best suggestion I can offer is to use absolutely positioned
::before
and::after
pseudo-elements on the virtual scroller to simulate borders on the right & left. We can't easily support borders at that location in the DOM because it modifies the space available for the rows.Alternatively, you can set the border on the full grid. In that case, you could try to hide the border in the header & footer by using pseudo-elements over those two elements, but you'd need to remove the toolbar and implement the toolbar components yourself outside the grid.
Thanks for the suggestion. I guess the pseudo-elements are the easiest solution for this case.
from mui-x.
The DOM changes improved the UX and will allow us to be much more accessible for screen readers, so we advise to look into migrating to v7 if you can.
If that answers your question, you can close the issue. Feel free to reopen if you need more assistance.
from mui-x.
Thanks @romgrk, we will upgrade it once it's out of beta.
from mui-x.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.
How did we do @boldurean?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.
from mui-x.
Related Issues (20)
- [pickers] Build error because of `@mui/utils/clamp` HOT 7
- [data grid] Filter panel columns customize HOT 3
- [pickers][DateRangePicker] Separately disable start and end date picking HOT 10
- [data grid] Multi Selection functionality in the Columns visibility panel HOT 1
- [data grid] `valueGetter` row is always never HOT 3
- [license] I just bought a new license and got a new license key, but I don't want to change my previous key. HOT 5
- [data grid] Is there a property to tell the grouping row column to ignore the valueFormatter/renderCell ? HOT 1
- [data grid] How do I save the filtered row data to state? HOT 6
- [pickers] Create RTL demo example HOT 2
- [data grid] Warn when `scrollToIndexes` has invalid arguments HOT 2
- [data grid] RenderHeader value is not being used in manage column component ? HOT 4
- [data grid] The cell selection color is not being applied HOT 2
- [data grid] Show/Hide All Columns, if all columns are hidden, unable to restore visibility. HOT 2
- [data grid] add "is not any of " in "singleSelect" type for filters HOT 1
- [Time Picker] button tomorrow HOT 2
- [charts] `categoryGapRatio` & `barGapRatio` is not a known property of `ChartXAxis` HOT 5
- [charts][docs] Need to document how to create a custom tooltip axisContent HOT 5
- [data grid] Change child table width on change of parent table HOT 3
- [data grid] tree collapses when controlled row selection is used HOT 4
- Please add documentation for preventing SSR flicker/FOUC with the Next.js app router [docs]
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.