CSS isolation and custom class

[ROBERTO REALE]

Hello,

I'm trying to apply a custom css class to a Dialog.

This works if I declare the class within the .razor file, while it doesn't work if I put my class in a separate .razor.css file (using css isolation),

I tried to use ::deep in different combinations, but none of them worked.

I attach a sample project. In this project both the red div and the dialog should have a width of 300px. This only happens in the first page.

Thank you, regards

Attachment: BlazorApp2_203b8da4.zip

[Indrajith Srinivasan]

Hi Roberto, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query “I tried to use ::deep in different combinations, but none of them worked” and able to reproduce the reported issue form our end. The reported issue occurs since the CSS selectors doesn’t match the dialog elements. By default, the dialog will be rendered based on body as target. In order to resolve the reported issue, we suggest you to render the dialog within the target element using the Target property. Check the below shared sample and code blocks for reference. 

 

Code blocks: 

 

SeparateCss1.razor 

 

 

<div id="target"> 

    <SfDialog Width="90%" CssClass="myclass" Target="#target"> 

        <DialogTemplates> 

            <Content> This is a Dialog with content </Content> 

        </DialogTemplates> 

    </SfDialog> 

</div>> 

 

 

SeparateCss1.razor.css 

 

 

::deep .myclass{ max-width: 300px } 

 

 

Screenshot:  

 

 

 

Also, you can simply using below CSS style for dialogs inside the body tag without using the dialog Target property. Please find the code snippet below. Using this, it will apply to all the dialog UI inside the body tag.  

  

  

<style>
    body .myclass {
        max-width: 300px !important;
    }
</style>  

  

 

Note: We suggest you to use "!important" to avoid the style overriding problem.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDialog_razor_css-51832738 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[ROBERTO REALE]

Thank you!

Regards,

Roberto

[Vinitha Jeyakumar]

Hi Roberto,

You are welcome. Please get back to us if you need any further assistance.

Regards,

Vinitha