How to apply css in popup modal

[KINS]

II have an modal popup control in my applications.I would like to know how to apply css in attached format.

Attachment: destination_Light_Box_45f49b12.zip

[Gunasekar Kuppusamy]

Hi Ramesh, 

Greetings from Syncfusion support.

We have validated your reported query " I have an modal popup control in my applications.I would like to know how to apply css in attached format."

We can add the styles to the dialog element by using CssClass property and also you can customize the dialog modal appearance by adding styles to the "e-dlg-overlay" class.

Code snippets:

<SfDialog CssClass="mdl-dialog" IsModal="true">

  . . .

</SfDialog>

        .mdl-dialog {

            border : 1px solid red;

        }

        .e-dlg-overlay {

            background-color: gray;

        }

Sample: https://www.syncfusion.com/downloads/support/forum/167292/ze/Dialog-340733243

Documentation: https://blazor.syncfusion.com/documentation/dialog/style/

Please check the sample and let us know if the solution helps,

Regards,

Gunaskear

[KINS]

Thanks for quick support 

[Gunasekar Kuppusamy]

Hi Ramesh, 

 

 

We are glad that you have resolved the issue from your end. Please let us know if you need further assistance.   

  

Regards,  

Gunasekar 

[KINS]

I have an below clarification in sfDialogu

1.I would like to remove close button and add two button in right side of the header (refer example code)

2.I would like to reduce the height of "Header"

Screencast:

https://www.screencast.com/t/2hxqD8UCX

Attachment: Dialog_115ffc57.zip

[Gunasekar Kuppusamy]

Hi Ahmed,

Good day to you.

We have validated your queries.

 

You can remove the Dialog Close button by setting the dialog ShowCloseIcon property as false. We have prepared a sample for your requirement and please find the sample below,

In this sample we have done the following things,

• Close button is hidden using the ShowCloseIcon property.
• Two buttons are rendered inside the DialogTemplate and aligned right side using float style.
• Dialog Header height is reduced by applying on .e-dialog .e-dlg-header-content class.

Code Snippets:

<SfDialog Target="#target" Width="500px" ShowCloseIcon="false" CssClass="mdl-dialog" IsModal="true" @bind-Visible="Visibility">

        <DialogTemplates>

            <Header>

                Dialog Header

                <div class="btn-parent">

                    <SfButton CssClass="e-small">

                        Btn 1

                    </SfButton>

                    <SfButton CssClass="e-small">Btn 2</SfButton>

                </div>

            </Header>

        </DialogTemplates>

    </SfDialog>

<style>

    .e-dialog .e-dlg-header-content .e-dlg-header {

        width: 100%;

    }

    .btn-parent {

        float: right;

    }

    .e-dialog .e-dlg-header-content {

        padding: 4px 18px 5px 18px;

    }

</style>

Sample: https://www.syncfusion.com/downloads/support/forum/167292/ze/Dialog-687927167

Please check the sample and let us know if you have needed any further assistence.

Regards,

Gunasekar

[KINS]

Thanks working fine.

but why flex  property not working as per my previous example ??

[Vinitha Jeyakumar]

Hi Ahmed, 

 

 

We have validated your query “but why flex  property not working as per my previous example ?” 

 

We couldn’t see any flex property in the example you have shared. But you can add flex property to the dialog sample we have shared. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167292/ze/Dlg_flex-686305835 

 

Regards, 

Vinitha 

[KINS]

I have another requirement in popup dialog

I need to show popup dialogue in right side .

please check below screen cast.

https://www.screencast.com/t/3pPhmHk40

[Gunasekar Kuppusamy]

Hi Ahmed,

Greetings from Syncfusion support.

We have validated your reported query with your shared video reference. You can achieve your requirement by using Dialog Position and AnimationSettings property.

Also, We have created a sample for your reference.

Code Snippets:



 <SfDialog @ref="DialogObj" Height="100%" Width="50%" ShowCloseIcon="true" @bind-Visible="Visibility">

        <DialogAnimationSettings Effect="@animationEffect"></DialogAnimationSettings>

        <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>

        <DialogTemplates>

           . . .

        </DialogTemplates>

        <DialogButtons>

            <DialogButton IsPrimary="true" Content="<a id='newTab' rel='nofollow' href='https://www.syncfusion.com/company/about-us' target='_blank'>Learn More</a>" OnClick="@OnBtnClick" />

        </DialogButtons>

    </SfDialog>

@code {

        SfDialog DialogObj;

        DialogEffect animationEffect { get; set; } = DialogEffect.SlideRight;

        private string Xvalue = "right";

        private string Yvalue = "center";

        private bool Visibility { get; set; } = false;

        private async Task OnBtnClick()

        {

         Visibility = true;

    }

}

Sample: https://www.syncfusion.com/downloads/support/forum/167292/ze/Blazor_App60532385

Please check the solution and let us if you have any concerns.

Regards,

Gunasekar

[KINS]

thanks but it should be full right side and 

there should not be any gap in top and bottom

which I shared video

https://www.screencast.com/t/3jfOEFT3xCi

[Gunasekar Kuppusamy]

Hi Ahmed,

We have validated your reported query with your shared video reference.

To get the required dialog behavior, please refer the following styles,

.e-dialog.e-popup.e-control.e-popup-open {

    max-height: 100% !important;

    top: 0px !important;

}

We have also modified the sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/forum/167292/ze/Blazor_App603628177

Please check the sample and let us know if you have concerns.

Regards,

Gunasekar

[KINS]

I have write below css to customize popoup Dialog but it overwrite for other popup like grid popup etc.Please advise how to avoid this.

.e-dialog {

    max-height: 98%;

    max-width: 100%;

    min-width: 70%;

    position: absolute;

}

.e-popup {

    height: 70%;

    position: absolute;

    width: auto;

    z-index: 1000;

}

[Indrajith Srinivasan]

Hi Ahmed, 

 

Good day to you, 

 

We have validated your reported query “I have write below css to customize popoup Dialog but it overwrite for other popup like grid popup etc.Please advise how to avoid this”, the class names are unique for all the dialog components used in syncfusion controls. You avoid the CSS styles from being applied to dialogs other than Dialog component. You can add ID for the dialog, and apply styles based in the ID set. Check the below shared code blocks for reference. 

 

 

<SfDialog ID="syncfusionDialog" /> 

 

<style> 

 

#syncfusionDialog.e-dialog { 

    max-height: 98%; 

    max-width: 100%; 

    min-width: 70%; 

    position: absolute; 

} 

#syncfusionDialog.e-popup { 

    height: 70%; 

    position: absolute; 

    width: auto; 

    z-index: 1000; 

} 

</style> 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[KINS]

The below css not working.I need to show popup with full right side,

css:-

e-dialog.e-popup.e-control.e-popup-open {

    max-height: 100% !important;

    top: 0px !important;

}

screecast:-

https://www.screencast.com/t/lT1OFWOC6xX

[Indrajith Srinivasan]

Hi Ahmed, 

 

Good day to you, 

 

We have further validated on the reported query, we have implemented the suggested solution in the shared application and it works fine. We have also shared the ensured sample from our end. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167292/ze/Blazor_dialog_customize204933290 

 

Screenshot: 

 

 

 

Can you please check the above shared sample and let us know if it meets the issue reproducing scenario? If not, can you modify the above shared sample and revert back to us, so that we can validate and assist you better. 

 

Regards, 

Indrajith