FluentMultiSplitter incorrect fixed pane size about fluentui-blazor HOT 19 CLOSED

Thank you Denis, that does indeed fix it.

It would be nice to see this powerful component promoted to full release status at some point.

from fluentui-blazor.

Mmm... Indeed, the problem seems unresolved in this case.
While we're working on this, you can add the style Style="min-width: 250px;"

from fluentui-blazor.

I found a solution, adding this styles. That will be included in the next release.

.fluent-multi-splitter > .fluent-multi-splitter-pane {
    min-width: auto !important;
    flex-grow: 0;
    flex-shrink: 0;
}

from fluentui-blazor.

This workaround style is overridden by the component style :-(
I think you should wait for the next version to fix this.: #2218

from fluentui-blazor.

This works ! Thank you so much.

from fluentui-blazor.

I will try to solve that quickly.

It seems that the style used (flex-basis: 300px) is not sufficient.
In the meantime, you can add this style to correct, manually, the problem in your code:

<FluentMultiSplitterPane Resizable="false" Size="300px" Style="min-width: 300px;">

from fluentui-blazor.

Yep. I think it's time to do that 😊

from fluentui-blazor.

Fixed with PR mentioned

from fluentui-blazor.

Should this also work with Resizable="true" set ?
In my case I have a resizable MultiSplitter and want to set inital size in pixels for the first (left) pane.
This does not seems to work.

from fluentui-blazor.

Should this also work with Resizable="true" set ?

If Resizable="true", it depends on the configuration of the other panels.
Do you have a simple example where this doesn't work?

from fluentui-blazor.

Hi Denis,

please see the following snippet of MainLayout.razor:

<FluentLayout>
    <FluentHeader>
        BlazorApp
    </FluentHeader>
        <FluentStack Class="main" Orientation="Microsoft.FluentUI.AspNetCore.Components.Orientation.Horizontal" Width="100%">
            <FluentMultiSplitter BarSize="8px">

                <FluentMultiSplitterPane Size="250px" Resizable="true">
                  <NavMenu /> 
                </FluentMultiSplitterPane>

                <FluentMultiSplitterPane >
                    <FluentBodyContent Class="body-content">
                        <div class="content">
                            @Body
                        </div>
                    </FluentBodyContent>
                </FluentMultiSplitterPane>

            </FluentMultiSplitter>
        </FluentStack>
    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer />
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

In this case the left pane IS NOT 250px in width !
If needed I can provide you a full working sample project.

from fluentui-blazor.

Setting Style="min-width: 250px;" sets the correct initial width but does not allow the pane to be set smaller than the configured width (as the style implies).
Hopefully this will be able with a fixed Size setting...

from fluentui-blazor.

You can reduce the size but you need to release at least 1 times. And after you can. Not ideal 😟

from fluentui-blazor.

Sorry, but what do you exactly mean by "release at least 1 time" ?

from fluentui-blazor.

Release mouse cursor

from fluentui-blazor.

Thank you. This seems not to work on my side. But nevertheless you plan to support setting an initial width with fixed Size setting which also allows shrinking the panes' width afterwards ?

from fluentui-blazor.

Thank you. This seems not to work on my side. But nevertheless you plan to support setting an initial width with fixed Size setting which also allows shrinking the panes' width afterwards

Yes, I will fix this issue for the next release (using the same "width" attribute). I will give you a workaround if possible.

from fluentui-blazor.

I've added the mentioned CSS to app.css and removed Style="min-width: 250px;":

<FluentMultiSplitterPane Size="250px" Resizable="true">

After this the width is still not 250px !? Did I miss something ?

from fluentui-blazor.

Maybe add the style directly to the component like this?

<FluentMultiSplitterPane Size="250px" Resizable="true" Style="min-width: auto !important; flex-grow: 0; flex-shrink: 0;">

from fluentui-blazor.