Customizing the size of a Blox pop-up using a script on Linux
Introduction
This article provides a step-by-step guide on adjusting the size of a Blox pop-up using a script applicable to all modals in Blox. This customization can enhance the appearance of your dashboard and ensure all elements fit well within the design.
Step-by-Step Guide
Access the Blox Editor:
Open your Sisense dashboard and navigate to the Blox widget where you want to adjust the show card height.
Add a Custom Script to the "script" Section of the Blox Editor:
Insert the following script to adjust the width and height of the show card:
const _bloxModalWidth = '50vw'; // Adjust the width as needed
const _bloxModalHeight = '50vh'; // Adjust the height as needed
(function addStyleToHead() {
const styleId = 'blox-show-card-modal-style';
if (!document.getElementById(styleId)) {
const cssContent = '.blox-show-card-modal > div { width: ' + _bloxModalWidth + ' !important; height: ' + _bloxModalHeight + ' !important; }';
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.appendChild(document.createTextNode(cssContent));
document.head.appendChild(styleElement);
}
})();
After implementing the changes, preview the dashboard to ensure the widget view meets your expectations.If you prefer not to use a script, you can adjust the style of the form itself to better fit within the pop-up. Modify the CSS properties directly in the Blox editor to achieve the desired dimensions.
Conclusion
By following these steps, you can customize the height and width of a show card in Sisense Blox to better fit your dashboard design. Whether you use a script or adjust styles directly, these methods provide flexibility in managing the appearance of your dashboard elements.
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this please let us know.
