I overrode the CSS for datagrid so that my SideNav and NavBar are still shown when in fullscreen. This is all that was needed:
.euiDataGrid--fullScreen {
position: absolute;
}
However, with the virtualisation update, the table goes off the right of the screen.
The height is correct because I just so happened to have used the same NavBar height as EUI but I have not applied the SASS mixin as my SideNav has multiple widths.
I understand this use case is probably out-of-scope of your intended usage but I believe the user should always be available to navigate away.
Would it be possible to add an option that used the above CSS and also calculate its dimensions based off its container?
The grid is supposed to be constrained by its container, can you verify that the container is correctly sized when the datagrid is not rendered inside of it?
Sorry, my use of "container" was misleading. Explaining this is difficult so here's a codepen, which can just boil down to
render (
<div style={{ position: "fixed", top: 50, right: 0, bottom: 0, left: 100 }}>
<DataContext.Provider value={dataContext}>
{grid}
</DataContext.Provider>
</div>
)
Perfect example, thanks!