FluentMultiSplitter incorrect fixed pane size

[ianclough]

🐛 Bug Report

With a simple FluentMultiSplitter having 2 panes, the left pane with no size specified, the right pane with a fixed size. The right pane will not have the correct size. Example code below has both FluentSplitter and FluentMultiSplitter for comparison.

💻 Repro or Code Sample

<FluentSplitter Panel2Size="300px">
    <Panel1>
        <div class="demopanel">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci 
                dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed 
                ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor 
                morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim 
                nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare 
                quam viverra orci sagittis.
            </p>
        </div>
    </Panel1>
    <Panel2>
        <div class="demopanel">
            <p>
                Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum 
                dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus
                in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu 
                sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus
                semper eget duis at.
            </p>
        </div>
    </Panel2>
</FluentSplitter>

<FluentMultiSplitter>
    <FluentMultiSplitterPane>
        <div class="demopanel">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci
                dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed
                ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor
                morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim
                nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare
                quam viverra orci sagittis.
            </p>
        </div>
    </FluentMultiSplitterPane>
    <FluentMultiSplitterPane Resizable="false" Size="300px">
        <div class="demopanel">
            <p>
                Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum
                dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus
                in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu
                sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus
                semper eget duis at.
            </p>
        </div>
    </FluentMultiSplitterPane>
</FluentMultiSplitter>

🤔 Expected Behavior

The fixed width panel size should be respected and the other panels adjusted within their constraints.

😯 Current Behavior

The fixed width panel is displayed with an incorrect size. In a more complex scenario 3 panels the left ones being resizeable then the fixed panel size updates when the left panel size is changed, after a couple of updates the size is approximately correct.

💁 Possible Solution

🔦 Context

My application is a specialised IDE where I want a 3 panel layout, the 3rd panel being collapsable and having a fixed width. The above is a minimal scenario to illustrate the problem.

🌍 Your Environment

• OS & Device: Windows 11 in a parallels VM running on a Mac
• Browser: Microsoft Edge
• .NET 8 and Fluent UI Blazor library Version 4.7.2

[dvoituron]

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;">

[ianclough]

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.

[dvoituron]

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

[vnbaaij]

Fixed with PR mentioned

[emetrix]

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.

[dvoituron]

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?