Is it possible to get the "Cut/Copy/Paste" of a SpeedDialItem to draw outside of the #target?

[Jeff Baxter]

I'm attempting to use the Speed Dial within a DIV that is set as the target. However when clicking the speed dial the SpeedDialItem(s) fail to draw outside of the target DIV. Is it possible to make the items overlap the boundaries of the target DIV?

Thanks

[Silambarasan I]

Hi Jeff,

Based on provided details, we suspect that the target DIV container is applied with overflow: hidden CSS styling.

Could you please check the attached sample and get back to us with more details such as code examples, etc. if still, the issue persists?

Regards,
Silambarasan Ilango

Attachment: BlazorServerApp_25d68488.zip

[Jeff Baxter]

Thank you for your response. Your example works as expected.

However, I'm beginning to think it has something to do with an SfSplitter and a SplitterPane. When I add the Speed Dial inside a Splitter Pane, it no longer draws correctly. I've also tried various values of the overflow CSS style on the #target div with no luck.

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom" IsSticky=true style="height: 335px;">

<SfSplitter Height="100%" Width="100%">

    <SplitterPanes>

        <SplitterPane Resizable="false" Size="25%">

            <div id="target" style="min-height:150px; position:relative; width:300px; border:1px solid #ff0000;">

                <SfSpeedDial Target="#target" Content="Edit">

                    <SpeedDialItems>

                        <SpeedDialItem Text="Cut" />

                        <SpeedDialItem Text="Copy" />

                        <SpeedDialItem Text="Paste" />

                    </SpeedDialItems>

                </SfSpeedDial>

            </div>

        </SplitterPane>

        <SplitterPane Resizable="false" Size="50%">

            <div></div>

        </SplitterPane>

        <SplitterPane Resizable="false" Size="25%">

            <div></div>

        </SplitterPane>

    </SplitterPanes>

</SfSplitter>

</SfAppBar>

[Silambarasan I]

Hi Jeff,

Thanks for your patience.

You can resolve and achieve the reported requirement by overriding the Splitter pane using custom CSS. Please refer to the below code example.

 

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom" IsSticky=true style="height: 335px;">

    <SfSplitter ID="splitter" Height="100%" Width="100%">

        <SplitterPanes>

            <SplitterPane CssClass="custom" Resizable="false" Size="25%">

                <div id="target" style="min-height:150px; position:relative; width:300px; border:1px solid #ff0000;">

                    <SfSpeedDial Target="#target" Content="Edit">

                        <SpeedDialItems>

                            <SpeedDialItem Text="Cut" />

                            <SpeedDialItem Text="Copy" />

                            <SpeedDialItem Text="Paste" />

                        </SpeedDialItems>

                    </SfSpeedDial>

                </div>

            </SplitterPane>

            //...

        </SplitterPanes>

    </SfSplitter>

</SfAppBar>

 

 

<style>

 

    #splitter .custom {

        overflow: visible;

    }

 

</style>

 

Could you please check the above solution and get back to us if facing any issues?

Regards,
Silambarasan Ilango

Attachment: BlazorServerApp_38024a4d.zip

[Jeff Baxter]

Your example was quite helpful.

In addition to setting the #splitter .custom "CssClass" for the splitter pane, I also had to adjust the SfSplitter Style="overflow: visible;" otherwise I would get this result:

With the change you suggested and the additional overflow: visible on the SfSplitter control itself the results are as desired:

 

[BharatRam Harikrishnan]

Hi Jeff,

We are glad to know that the issue was resolved. Please get back to us if you need further assistance.

Regards, 

Bharat Ram H