Resolve the Bootstrap CSS conflict while embedding dashboard through JavaScript embedding

When using JavaScript Embedding, you may encounter UI glitches. These UI glitches can include misalignment of widget icons, widget names, and hover shadows, as shown in the below image. This article will guide you on how to resolve these issues.

Cause

These issues may arise due to the bootstrap style used within the embedding application. This bootstrap style overrides the established Bold BI style, leading to the aforementioned UI errors.

Solution

To resolve these UI errors, it is recommended to use a Bootstrap compatibility CSS file. This file will ensure that the bootstrap style of the embedding application does not override the Bold BI style, thus resolving the UI errors.

Here are the steps to use the bootstrap compatibility CSS file:

1. Download the bootstrap compatibility CSS file attached below,

2. Add the CSS file to your project.
3. Link the CSS file in your HTML file where you have embedded the SDK.

By following these steps, the UI errors in the dashboard designer should be resolved.

References

• JavaScript embedding
• JavaScript API reference

Please note: Always ensure to use the latest version of the JavaScript Embedded SDK for optimal performance and to avoid any compatibility issues.