How to Resolve Style Issues in Embedded Applications with External CSS Files
How to Resolve Style Issues in Embedded Applications with External CSS Files
This article will guide you on how to resolve style issues in embedded applications with external CSS files.
Cause:
When embedding dashboards in your applications, you may encounter style issues caused by external CSS files. This can happen because your application’s CSS styles may conflict with the CSS styles used in the embedded dashboard. When this happens, it can cause UI glitches, such as misaligned text, overlapping elements, or broken layouts.
External CSS Causing Style Issues in Embedded Applications:
Solution:
As the issue frequently arises, during the investigation, it was found that your embedded application’s external CSS styles were overriding the BoldBI dashboard styles. To prevent this, the following solutions were suggested:
- Avoid referencing the override file while on the dashboard rendering page.
- Scope the style properties with prefixes to avoid affecting the dashboard.
By implementing the suggested solutions, you can prevent your application CSS styles from overriding the BoldBI dashboard styles and avoid style issues.