Column Headers and Rows on FluentGrid Control Lose Style with Horizontal Scroll about fluentui-blazor HOT 4 CLOSED

Hi,

I found that adding Style="min-width: max-content;" to the FluentDataGrid , as shown in the example you previously mentioned, ensures that the column headers and rows render properly.

Regards
Jose Coelho

from fluentui-blazor.

Hi,

Thanks for your report. We will look into it shortly!

from fluentui-blazor.

This is unfortunately an problem in the current version of the underlying web components in combination with the GenerateHeaderOption.Sticky option. As a (sort of) solution, you can set the header type to not be sticky as there won't be a background set on the header cells.

I recreated a similar table on the FAST Explorer site and the same is happening there (the table is wider and I scrolled to the right):

As the web components team is busy it building their next version and deprecation of older libs is taking place, I'm afraid there won't be a fix for this soon (if ever).

I'm closing this issue because it can't be fixed on our side. I you want, you can open an issue in the FAST repo for this, but as said I think changes of seeing it solved are slim.

PS. If you want to have a horizontal scrolling grid, do it like shown at https://www.fluentui-blazor.net/DataGrid#tablewithscrollbars. Much smoother then setting an overflow on the grid itself.

<div style="display: table; table-layout: fixed; width: 100%;">
    <div style="overflow-x: auto;">
        <FluentDataGrid Id="weathergrid"...>
        :
        : 
        </FluentDataGrid>
    </div>
</div>

from fluentui-blazor.

That is a great find @jmjcoelho! Glad that got you unblocked.

I'll make sure to add a note on this to the docs.

from fluentui-blazor.