1. Home
  2. Forum
  3. Report Platform
  4. CSS conflict with Syncfusion Blazor grid
If you became a customer of the Syncfusion� Reporting Platform or the Report Viewer, Report Designer, or Report Writer components before October 2019 and have questions related to those products, you can request support through our forum system. However, please note that this support system is only for existing customers who are still using the Syncfusion� Reporting Platform or its components and not for new customers looking for reporting products from Syncfusion�.

For new customers or those with general reporting questions, we recommend contacting our support team at https://support.boldreports.com/, which is a separate brand created by Syncfusion� for its reporting solutions. Our team will be happy to assist you with any questions you may have.

Thank you for choosing Syncfusion� for your reporting needs.

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



9 Replies
PA Paul November 4, 2022 04:35 AM UTC

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 10:54 AM UTC

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 09:38 PM UTC

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 03:31 PM UTC

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

SZ Szoke December 22, 2022 08:44 PM UTC

Dear Support !


What is the solution if our application has a Fluent or Tailwin theme?


AM Arumugasami Murugesan Syncfusion Team December 23, 2022 12:47 PM UTC

Hi Szoke,


We are checking this with our team and will let you know once we get the details.


Regards,

Arumugasami M


AM Arumugasami Murugesan Syncfusion Team December 27, 2022 01:04 PM UTC

Szoke,


In ej2 syncfusion, we have support for using the Fluent or Tailwind themes. Please refer to the below documentation.

https://blazor.syncfusion.com/documentation/appearance/themes#reference-themes-in-blazor-application

https://ej2.syncfusion.com/documentation/appearance/theme/


For creating a new theme in bold reports, refer to the below documentation.

https://help.boldreports.com/embedded-reporting/theme-studio/create-a-new-theme/


If this is not your requirement, please share additional details of your requirement along with the snap to validate it further. 


PH Phil Holmes August 27, 2023 08:42 AM UTC

There's still CSS conflict issues (at least) with using Blazor & Bold Reports viewer. Its especially evident in the parameters section of viewing reports, where the scroll on dropdown lists is messed up, and date parameters are also messy.

Rather than clean-out my own project, simply running the EJ2 example above shows the problem behaviour, which I have screenshotted here:

Image_8952_1693125594261

Please review the scroll on the right of the category field, and the "Select date" control in 2nd row of parameters.  This is the same sort of messed up presentation I am getting for parameters in my Blazor WASM app.

Please advise. Any help appreciated.

Phil


AM Arumugasami Murugesan Syncfusion Team August 28, 2023 10:57 AM UTC

Hi Phil Holmes,


Thanks for contacting Bold Report support.


We have created a ticket for your query. Please check the ticket from the below site and follow further.

https://support.boldreports.com/support/tickets


Regards,

Arumugasami M


Loader.
Up arrow icon