CSS Isolation in .Net 5.0 with Syncfusion controls

[Ditchford]

Hello

Do you have any doco / examples of using css isolation, i.e. placing css in MyPage.razor.css to style Syncfusion components.

Thanks

[Ditchford]

Hello

Any feedback on this.?

Thanks

[Ditchford]

Anyone....Bueller?

[Muthukumar Kannan]

Hi Ditchford,

We deeply regret for the inconvenience caused.

We have validated your reported query for "CSS Isolation with Syncfusion components". Here, we would like to let you know that, our syncfusion components are multi theme supported. So that CSS Isolation is not recommended for it.

However, we are working on modifying the synfcuion components by CSS Isolation by using scoped CSS.

Currently, we are working on this with prioritization. We will share further details on November 16th,2020.

Until then we appreciate your patience.

Regards,

Muthukumar K

[Joe]

Hi Muthukumar ,

Any update on this?

Thanks,
Joe

[Muthukumar Kannan]

Hi Ditchford / Joe, 

  

Sorry for the delayed response. 

  

We have prepared a sample to demonstrate “Styling our Syncfusion components using CSS isolation” and attached the sample below for your reference. In that, we have styling our components (e.g: Button & Calendar) by changing its background-color from scoped CSS. Please check the below details and get back to us if you need any further assistance. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CssIsolation617592325 

Code example:

 

Components.razor 

<h2>Button</h2> 

<div> 

    <SfButton>SFButton</SfButton> 

</div> 

  

<h2>Calendar</h2> 

<span> 

    <SfCalendar TValue="DateTime"></SfCalendar> 

</span> 

Components.razor.css 

::deep .e-btn { 

    background-color: darksalmon; 

} 

  

::deep .e-calendar { 

    background-color: lightblue; 

} 

output: 

  

Note:
Our components should be added within block/inline containers and we need to add '::deep' CSS pseudo-selector to add the scoped CSS for all descendant components. Use !important in CSS style attributes for modifying all the child and nested components. 

  

Regards, 

Muthukumar K 

 

[Tim]

::deep 

works for me. 

Thanks Muthukumar

[Mike Chafin]

Take a look at 

https://daveabrock.com/2020/09/10/blazor-css-isolation

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0

[Muthukumar Kannan]

Hi Tim / Mike,

Welcome. Thanks for your valuable information.

Regards,

Muthukumar K

[Ditchford]

Hello Muthukumar 

Thank you for your feedback.  I have been playing with css isolation with varying success.  I have attached a sample.  In the pivot table page in the sample I have added a PivotTable.razor.css file and added some css.  The styling of the buttons works as expected, but when I try to style something more complex like the FieldList width then this does not work.

Any ideas?

Attachment: SyncfusionTroubleshoot_b4f72396.zip

[Saranya Sivan]

Hi Ditchford, 

 

The reported problem occurs due to the field list dialog UI appended at end of the document body by default, which is not match the given selector in below CSS file. 

 

To overcome this problem, kindly use the "Target" property to append the field list dialog as required. For your convenience, we have modified the given sample below for your reference. 

 

 

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

 

 

<style>
    body .e-dialog.e-popup {
        width: width: 200px !important;
    }
</style> 

 

 

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

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/7z/SyncfusionTroubleshoot-1271847866 

 

Regards,
Saranya. 

 

[Ditchford]

Hey Saranya

Thanks...that works.

Regards

[Saranya Sivan]

Hi Ditchford, 

 

Thanks for the reply. 

 

Please let us know if you have any other queries. We are always happy to assist you. 

  

Regards, 

  

Saranya. 

 

[Miles Gibson]

I would like to use the FileManager control.   However, it is not rendering properly, likely due to css conflicts.  How do I know what CSS styles to add into a custom MyFileManager.razor.css file?

TIA,

Miles

[Indhumathy Loganathan]

Hi Miles, 

 

We have prepared a simple FileManager sample with CSS isolation styling. We have customized the FileManager background color and the Toolbar background color and it is working fine for us. 

 

Please refer to the below code snippets. 

 

index.razor 

 

<h2>FileManager</h2> 

<div> 

    <SfFileManager TValue="FileManagerDirectoryContent"> 

        <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations" 

                                 UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload" 

                                 DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download" 

                                 GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage"> 

        </FileManagerAjaxSettings> 

    </SfFileManager> 

</div> 

 

index.razor.css 

 

::deep .e-filemanager { 

    background-color: #bacadb !important; 

} 

 

::deep .e-toolbar .e-toolbar-items { 

    background: #297bce !important; 

} 

 

 

 

Please find the sample from below link.  

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSample305508530 

 

Note: Use !important in CSS style attributes for modifying all the child and nested components. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L