Handling CSS Conflicts in Embedded Bold BI Dashboards
When embedding Bold BI dashboards into your application, it is possible to encounter CSS conflicts arising from the presence of other Syncfusion controls within your application. To address this issue, the Bold BI SDK offers the destroyStyles() and addStyles() methods, which can be utilized to rectify the issue. Specifically, the destroyStyles() method should be employed when switching to different pages from the embedded dashboard page. On the other hand, the addStyles() method should be employed when switching to the embedded dashboard page.
Removing Style References
To remove style references and prevent conflicts, invoke the destroyStyles() method as shown below:
var instance = BoldBI.getInstance("dashboard");// Here dashboard refers to embed container id
instance.destroyStyles();
For more information about the destroyStyles() method, refer to the Bold BI documentation.
Adding Style References
If you need to add style references, invoke the addStyles() method as shown below:
var instance = BoldBI.getInstance("dashboard");// Here dashboard refers to embed container id
instance.addStyles();
For more information about the addStyles() method, refer to the Bold BI documentation.
By using the dashboard’s instance to destroy and add style references, you can prevent CSS conflicts between your application and the embedded Bold BI dashboards.
Additional References
