FluentCard will cut off select box lists

[StevenTCramer]

If you have a FluentSelect inside a FluentCard the list will be cut off at the border of the card.

The reason is because the card has contain: content;

I did a search and saw where this was added.

1006573

There is a comment:

"* Fix style adding contain: content;"

But I don't know exactly what "fix" means.

Workaround

One can work around this by setting the contain to none.

<style>
  @($@"
    #{Id} {{
      contain: none;
    }}
  ")
</style>

[dvoituron]

Have you tried adding AreaRestricted="false" as explained on this page?
https://www.fluentui-blazor.net/Card

[StevenTCramer]

I have but it still doesn't work.

contain:contnet is still applied.

[StevenTCramer]

I see the issue...

<FluentCard Id=@Id MinimalStyle=true AreaRestricted=false>

With MinimalStyle=true, AreaRestricted does NOT work.

<FluentCard Id=@Id MinimalStyle=false AreaRestricted=false>

With MinimalStyle=false, AreaRestricted does work.

[dvoituron]

Using AreaRestricted="false" a style is automatically added to set contain: style;

protected string? StyleValue => new StyleBuilder(Style)
    .AddStyle("--card-width", Width, !string.IsNullOrEmpty(Width))
    .AddStyle("--card-height", Height, !string.IsNullOrEmpty(Height))
    .AddStyle("content-visibility", "visible", !AreaRestricted && !MinimalStyle)
    .AddStyle("contain", "style", !AreaRestricted && !MinimalStyle)
    .Build();

What is you issue with that?

[StevenTCramer]

I will do a PR when I have a min. And add test cases.

[dvoituron]

I will do a PR when I have a min. And add test cases.

Why? You need to use only AreaRestricted="false" not MinimalStyle="true"