fix: Setting panel size of FluentSplitter in code does not work after manually moving splitter bar about fast-blazor HOT 18 CLOSED

That makes sense. I just thought at the time of the resize event the current sizes should be available in pixels.
But I managed it to convert the percentage value in pixels.

from fast-blazor.

Hi.

Did you tried the new MultiSplitter component?

https://www.fluentui-blazor.net/MultiSplitter

from fast-blazor.

This behavior is not really a bug but more a design choice we made when building the component.
We use the PanelXSize parameters to set the initial width of the panels. Once you start moving the bar, you are manipulating those same values.
The only way to go back to the original values is to reload the component (which is nor possible in Blazor) or reload the page (which is not what you want, I assume).
As @dvoituron did, you may be able to achieve your desired behavior withe the MultiSplitter

from fast-blazor.

Thanks for the feedback.
I've just tried to use FluentMultiSplitter. But setting Size property of a FluentMultiSplitterPane seem to have also no effect. The width of the pane does not change !?
Should this be possible or am I missing something ?

from fast-blazor.

Do you have an example of code ?

from fast-blazor.

Hi Denis,

please see the following quick and dirty snippet. If required I can also put together a full sample:

MainLayout.razor:

<FluentLayout>
    <FluentStack Class="main" Orientation="Microsoft.FluentUI.AspNetCore.Components.Orientation.Horizontal" Width="100%">
        <FluentMultiSplitter>
            
            <FluentMultiSplitterPane @ref="pane1" Size="@GetSideBarSize()" Min="100px" Max="500px">
                <SideBar @ref="sidebar" />
            </FluentMultiSplitterPane>

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

        </FluentMultiSplitter>
    </FluentStack>
</FluentLayout>

@code {
  private FluentMultiSplitterPane pane1;
  private int temp = 250;

  private void MoveSplitterBar()
  {
      temp += 10;
      pane1.Size = temp.ToString() + "px";
  
      StateHasChanged();
  }
  
  private string GetSideBarSize()
  {
      return temp.ToString() + "px";
  }

}

Thank you.

from fast-blazor.

@emetrix

1. First of all, your example works until the user manually resizes the separator. From that moment on, the "internal" size replaces the defined value.

   

2. To solve this problem, you need to "cancel" user resizing to continue using your Size value: using the following OnResize method.
   Another "detail" is that the OnResize event gives you the new size as a percentage (you can keep it or compute the equivalent pixel size).

   <FluentMultiSplitter OnResize="@OnResize" Height="100px">
       <FluentMultiSplitterPane Size="@(Size + "%")" Min="100px" Max="500px">
           Part1
       </FluentMultiSplitterPane>
       <FluentMultiSplitterPane>
           Part2
       </FluentMultiSplitterPane>
   </FluentMultiSplitter>
   <FluentButton OnClick="@(e => MoveSplitterBar())">Move</FluentButton>
   
   @code {
       double Size = 40; // Percentage
   
       void OnResize(FluentMultiSplitterResizeEventArgs e)
       {
           e.Cancel = true; // Cancel to use custom size
   
           if (e.PaneIndex == 0)
           {
               Size = e.NewSize;
           }
       }
   
       void MoveSplitterBar() => Size += 3;
   }

   

from fast-blazor.

That sounds very promising. I'll try later today and send you my results.
Just a quick thought: Do you think it makes sense to extend FluentMultiSplitterResizeEventArgs with the new sizes of the panes in pixels, too ? Or is that a very special case I have ?
Because that would not need me to use JSInterop to get window dimension and recalculate percentage to pixels...

from fast-blazor.

Just a quick thought: Do you think it makes sense to extend FluentMultiSplitterResizeEventArgs with the new sizes of the panes in pixels, too ?

It is not possible to manage these sizes using pixels, as the browser can be resized. When using percentages, these values remain unchanged, but when using pixels, these values change.

from fast-blazor.

But I've noticed an issue: When using a collapsed FluentNavMenu in e.g. the left pane the fluent menu gets cut at the edge of panel1:

The tooltip is shown correctly:

from fast-blazor.

Try to do some experimentation with CSS styles
content-visibility: visible;
contain: style;
That is what we use for the FluentCard content to break out of the card area.

from fast-blazor.

Hi Vincent,
do you have a tip on which "element" the CSS styles you mentioned should be set ?
Applying to fluent-menu and/or fluent-nav-menu had no effect.

from fast-blazor.

With the FluentCard we set it on the card element itself to have a select be able to 'escape' the card. Maybe you need to include the menu in a div with those styles set?

Not at a pc for a couple of days so can't look into it deeper.

Check https://www.fluentui-blazor.net/Card#arearestrictedexampl and the Card source for how it is done there

from fast-blazor.

I've tried several options using the mentioned classes - unfortunately without success.
Maybe it's because of my very limited CSS skills...
I would be thankful if you could have a look at it once you have some spare time.
Thank you.

from fast-blazor.

Hi Vincent,
do you think the mentioned issue in FluentUI webcomponents ( [Bug]: combobox dropdown not fully visible in datagrid row/cell #31359 ) does directly affect my issue ?
Or do I need to raise some issue, too ?

from fast-blazor.

Not sure it is the same issue. Maybe better to raise an issue for this one as well.

from fast-blazor.

Thank you. I'm just confused how to do that at best because for me MultiSplitter seems to be a experimental component of your Blazor FluentUI library and not a official WebComponent control ?

from fast-blazor.

Yeah, that might complicate things a bit. Neither splitter not multi splitter are Fluent UI web components (but are web components).

I'm pretty it can be solved with CSS styling but not proficient enough to crack it.

from fast-blazor.