microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.77k stars 361 forks source link

fix: DatePicker popup is hidden in MultiSplitterPane #2791

Open hygehyge opened 5 days ago

hygehyge commented 5 days ago

🐛 Bug Report

Calendar popup of DatePicker that located in MultiSplitterPane is hidden by multi-splitter-bar. Image

💻 Repro or Code Sample

@page "/"
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1>DatePicker popup is hidden</h1>

<FluentMultiSplitter Orientation="Orientation.Vertical">
    <FluentMultiSplitterPane>
        <FluentDatePicker/>
    </FluentMultiSplitterPane>
    <FluentMultiSplitterPane>
        <p>ABC</p>
    </FluentMultiSplitterPane>
</FluentMultiSplitter>

🤔 Expected Behavior

Calendar should be visible over other components.

😯 Current Behavior

Calendar is hidden by multi-splitter-bar.

💁 Possible Solution

🔦 Context

🌍 Your Environment

dvoituron commented 5 days ago

This behaviour is due to the presence of this style overflow in the FluentMultiSplitter component. You can disable it (see example below) if you manage the minimum panel size correctly. We will try to find a solution that is compatible with both functions.

.fluent-multi-splitter > .fluent-multi-splitter-pane {
   overflow: unset !important;
}