We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

CSS conflict with Syncfusion Blazor grid

Hi,

To make Bold Reports compatible with Syncfusion controls you follow the instructions here :

https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/


However, I have found a CSS conflict that affects the SFGrid.

The filterbar setting for the grid

<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>

positions a bar just below the column headers for entering filter text :



 But, once the compatibility instructions are followed I get this instead :


The filter div has been positioned too low and is almost invisible.


Please advise the fix for this.


Thanks

Paul



4 Replies

PA Paul November 3, 2022 11:35 PM

I found the answer in an old post.


Your documentation is incomplete - you also to reference

<link rel='nofollow' href="https://cdn.boldreports.com/...version.../content/material/bold.reports.all.compatibility.min.css" rel="stylesheet" />



AM Arumugasami Murugesan Syncfusion Team November 7, 2022 05:54 AM

Hi Paul,


We are glad that you have found the solution. Below documentation that you have mentioned is the correct one.

https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/


You have to use the common script for referring. Also, you can use the below script which is in the document to resolve the issue as shown in the below snap.


If you face any other issues, we suggest you to open a new ticket using your account. 

https://support.boldreports.com/create



PA Paul November 13, 2022 04:38 PM

Hi,


Thanks for the update.

I note that your documentation is not quite correct for someone using the Material theme.

Your documentation states to use :

  <link rel='nofollow' href="https://cdn.boldreports.com/4.2.52/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />


Whereas, https://cdn.boldreports.com/XXX/content/material/bold.reports.all.compatibility.min.css does not import this - it imports :

bold.widgets.core.material.compatibility.min.css

So, using the the material variant is important for someone implementing the Material theme.


Thanks

Paul



AM Arumugasami Murugesan Syncfusion Team November 15, 2022 10:31 AM

We have created a sample with the Syncfusion Blazor Grid components along with the Bold Reports and followed the below documentation, but it is working fine on my end. We have attached the sample application for your reference.

https://help.boldreports.com/embedded-reporting/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/


If you are still facing any issue, please share your issue reproducible sample with us to validate it further.


Attachment: EJ2_VIEWER_8882ecc0.zip

Loader.
Live Chat Icon For mobile
Up arrow icon