Firefox: grid in dialog shrinks when dialog has vertical scrollbar

[Timmeeeey]

Description

When a grid is displayed in a dialog and the dialog has a vertical scrollbar then the grid shrinks in Firefox.

• igniteui-angular version: 18.x
• browser: Firefox

Attachments

https://codesandbox.io/p/devbox/xenodochial-ives-7zym7y?workspaceId=709bf0f7-99f5-4dac-8c7b-eedf334378e5

[damyanpetev]

Hello, @Timmeeeey,

While there should be a pretty easy solution in the setup, I think this warrants a bit of explanation. The Dialog doesn't specify an explicit width intentionally - it sizes based on it's content. Taking this setup with no extra styles:

<igx-dialog #dialog [closeOnEscape]="true">
  <igx-grid [data]="data">
    <!-- ... -->
  </igx-grid>
</igx-dialog>

The Grid also falls back to width/height 100%. So in essence, the Grid is trying to match 100% of the width of its parent that also tries to match the size of its contents - bit of a feedback loop there :). The Dialog does have a minimum width and that's the size you see the Grid shrinking to. For simplicity, here's a simplified setup of just a couple of divs representing the dialog container and grid here https://codesandbox.io/p/sandbox/qjgvqw If anything, the behavior in Firefox is more closely tracking with how a simple 100% div would size in this scenario and the Chromium browsers behavior of the Grid is a bit off.

Regardless, there's a pretty simple solution - you either set a fixed width on the Grid (e.g. "800px") or if it needs to be dynamic - leave the grid relative to the parent, but specify a width for the Dialog or in this case an extra container due to overlay move:

<igx-dialog #dialog [closeOnEscape]="true">
  <div style="width: 80vw">
    <igx-grid [data]="data">
    <!-- ... -->
    </igx-grid>
  </div>
</igx-dialog>

This will set the Dialog to 80% of the viewport and the Grid will size itself normally. Fork: https://codesandbox.io/p/devbox/quiet-sea-vscgsz

@dkamburov There might still be in issue with the Grid's calculations, considering technically only sizes correctly in FF and only when a scrollbar is present. I know this is an ongoing effort to clear out a bunch of those, but still valid.

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.