[DataGrid] DataGrid Horizontal ScrollBar doesn't show using Vite+JS about mui-x HOT 9 CLOSED

If I manually switch the width of the #root element the scrollbar appears. It seems like this is a CSS issue. The grid will fill the width that you give it.

Does that answer your question?

from mui-x.

Thanks for your response.

I think it isn't because I used an official documentation example. It should work on Create React App (CRA) or Vite.

On CRA I did same example and it worked without change CSS.

I think it should be fixed on component or example should be altered to reflect your change.

I have a complex page which changing width to 100% on root element won't shows scrollbar.

from mui-x.

I have a complex page which changing width to 100% on root element won't shows scrollbar.

Do you have a reproducible example of this issue?

from mui-x.

Is codespace example not enough to show that there is a problem on create a react app with vite and datagrid?

Using CRA there isn't such bug. You can check here.

I have a complex page which changing width to 100% on root element won't shows scrollbar.

Do you have a reproducible example of this issue?

I added complex page link but it load nothing because I access a API and I can't make token or url public.

On my project I added #root{width:100%} to index.css but it doesn't work.

from mui-x.

I'm sorry but I don't see a bug. The first codesandbox was missing the proper CSS to make the grid work like you wanted to. Adding it fixed the issue.

If I open the codesandbox links in your last message, I don't see anything and there seem to be errors logged to the console:

from mui-x.

As I said before my page won't render properly because I consume a API that I can't make it public.

I don't want to be insistent but can you explain why official example works on mui docs but I have to change CSS on the same example using vite?

If you don't mind you can compare code on Mui repository and mine.

Thanks

from mui-x.

I'm sorry but I don't see a bug. The first codesandbox was missing the proper CSS to make the grid work like you wanted to. Adding it fixed the issue.

If I open the codesandbox links in your last message, I don't see anything and there seem to be errors logged to the console:

I'll add width 100% on parent container. I'll put here the result. I think it would worth see this behaviour difference in horizontal scroll on CRA and Vite.

from mui-x.

I'm sorry but I don't see a bug. The first codesandbox was missing the proper CSS to make the grid work like you wanted to. Adding it fixed the issue.
If I open the codesandbox links in your last message, I don't see anything and there seem to be errors logged to the console:

I'll add width 100% on parent container. I'll put here the result. I think it would worth see this behaviour difference in horizontal scroll on CRA and Vite.

It worked. My DataGrid is contained in <Grid item>. I changed to <Grid item sx={{ width: "100%" }}> to make it work.

Thank you very much 👏 😄

from mui-x.

👍

from mui-x.