Adding Floating Action Button to Dialog

[Paul]

Hello,

 I am trying to add floating action button to a sfDialog but I am not getting the desired result.  The button does not display on the dialog even though i set the dialog as the target. The sfDialog display on the component that invokes the dialog. 

I want know if it possible add floating action button to sfDialog is possible. If it is possible, I would be glad if you could provide me with a demo or how to achieve that requirement.

Thank for your usual assistance

Best regards,

Paul Aziz

[YuvanShankar Arunagiri]

Hi Paul,

We have checked your reported query and for more clarification, if we want to use the floating action button within the dialog then define the target element with position style as relative and the respected target element must present within the dialog popup. Refer to the below code snippet.

<SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">

    <DialogTemplates>

        <Header>

            <span>Adding the floating button</span>

        </Header>

        <Content>

            <p>Greetings Nancy! When will you share me the source files of the project?</p>

        </Content>

        <FooterTemplate>

            <div id="targetFAB" style="min-height:70px; position:relative;">

                <SfFab Target="#targetFAB" IconCss="e-icons e-plus"></SfFab>

            </div>

        </FooterTemplate>

    </DialogTemplates>

    <DialogEvents OnOpen="@BeforeDialogOpen" Closed="@DialogClosed"></DialogEvents>

</SfDialog>

Output screenshot:

Kindly check with attached sample code file and get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: Index_c9d6b898.zip