Troubleshoot UI issue when change the language in the Embedded SDK
When using the JavaScript Embedded SDK in a Blazor web assembly, you may encounter an issue where the “Applied Filters” text does not fit into the box when the language is changed. This is because the text may become two lines instead of one, causing it to overflow from the box.
To resolve this issue, you can adjust the height of the .boldbi-dashboarddesigner .bbi-dashboarddesigner-designPanel .bbi-dbrd-titlediv in ej.dashboarddesigner.min.css from 100 px to auto. This will allow the box to adjust its height automatically to accommodate the text.
However, a more efficient solution would be to overwrite the dashboard filter overview title element CSS. This can be done by adding the following CSS styles to the HTML files inside the style tag for embedding samples:
<style>
#dashboard_embeddedbi .bbi-dashboarddesigner-designPanel .bbi-dbrd-titlediv {
width: auto; // Customize the width you want
}
</style>
By adding these CSS styles, the filter overview title element CSS width property will be overwritten and the dashboard will be rendered properly. This ensures that regardless of the language change, the “Applied Filters” text will always fit into the box.
References
