fix: FluentStack : Autogrow/shrink not working

[RobDene]

🐛 Bug Report

When using Fluent Stack, Fluentcards placed in a horizontal stack don't automatically growh and shrink as you would expect. For example if you use a fluent navmenu with a toggle to show and hide, if you have a fluent stack with 2 cards side by side, when you toggle the menu the cards will simply jump to occupy space but keep the same size. Without a FluentStack, they autogrow as one would expect.

Autogrow/shrink should work as normal irrespective of whether its in a fluent stack or not.

v4.10.1 , previous versions as well

[dvoituron]

Without a code example to run, we can't answer your problem. We're a small team and we don't have the time to try and reproduce all the issues in a sample code.

I've tried this little example and I can't see when the FluentCard doesn't resize, depending on the FluentStack.

<FluentStack Style="background-color: var(--neutral-layer-3); overflow: hidden; resize: horizontal; padding: 4px;">
    @if (MenuVisible)
    {
        <div>My Menu</div>
    }
    <FluentCard>Hello 1</FluentCard>
    <FluentCard>Hello 2</FluentCard>
</FluentStack>

<FluentSwitch @bind-Value="MenuVisible" />

@code
{
    bool MenuVisible = true;
}

[RobDene]

Just put your sample code above into the default Blazor FluentUI template instead of the home page and it still does the same thing I get and doesn't work correctly - what it does is moves all the content to the left - it doesn't "grow" to occupy the additional space - if you don't use the fluentstack it "grows" correctly to fill the space.

[dvoituron]

You probably have a CSS style applied to these elements to achieve this result.

[RobDene]

We haven't applied any CSS - we just took the default template build, replaced the Hello world code with this ?

[vnbaaij]

Hi Rob,

At this point, both Denis and I have looked at this and both are not able to reproduce your issue.

Is it too much to ask for clear steps to reproduce? Also, provide more details about what settings you used when creating the site with the template (Server, Wasm, interactivity). Maybe throw in a screenshot of what you are seeing while you are at it?

We really want to help but this is taking us too much time this way. Help us to help you. Thanks

[RobDene]

We have tracked it down to an issue with Fluent tabs - they seem to create a conflict somewhere. So we set up cards on a fluent tab and then collapse the menu, the fluent tabs simple shift to the left into the free space created by the collapsed menu but remain the same size and don't expand into the space

[vnbaaij]

So this one can be closed?

[RobDene]

Ok - thanks.