fix: Combobox wrong z-index stack order

[dromerolovo]

When the Height property is not specify in FluentCombobox, some elements are displayed on top of the combobox options list.

Basically the guitly is this logic:

@if (!String.IsNullOrEmpty(Height)) { <style> @($"#{Id}::part(listbox) {{ max-height: {Height}; z-index: {ZIndex.ComboboxPopup} }}") </style> }

I can make a PR, I just wanted to know if this is intended.

[vnbaaij]

No, this is not intended. PR is welcome!

[mkgn]

I am using this in a Blazor serverside using .Net 8 (Microsoft.FluentUI.AspNetCore.Components v 4.3.1). I have the inside a Below is a minimum syntax that you can just dump to a page and test.

<FluentDataGrid Id="timesheet" Items="workHoursList" TGridItem="WorkHourEntry">
<TemplateColumn>
    <FluentCombobox Placeholder="Select Project" Items="projectList" @bind-Value="@selectedProject" Autocomplete="ComboboxAutocomplete.Both" TOption="string"  Height="200px" />
</TemplateColumn>
</FluentDataGrid>

And this is how it appears

If I just set the height of fluent-data-grid-cell then the list appears. Note that I have set the Height to 200px in So I guess the z-index issue still remains.

[vnbaaij]

I am using this in a Blazor serverside using .Net 8 (Microsoft.FluentUI.AspNetCore.Components v 4.3.1). I have the inside a Below is a minimum syntax that you can just dump to a page and test.

This is a different issue. It is a duplicate of #217 (still open) which is tied to an issue in our upstream dependencies. We do not have a good fix available for this.

Some extra food for thought...the FluentDataGrid is primarily meant for displaying data. It is not meant to be an end-all data entry tool. I would suggest to maybe add a button to each row which then leads to an edit form (panel, dialog,...) for each record.