[data grid] overflow issue when border is set to virtualScroller. about mui-x HOT 9 CLOSED

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:

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.

⚠️ This issue has been closed.
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.