How to fix the position of carousel navigation buttons in BloX [Linux]
Summary: Thalita Santos, Thalita Santos, provides a detailed guide on how to fix the position of navigation buttons in a BloX carousel widget in Sisense. By default, these buttons may shift based on the size of the content displayed, prompting the need for scrolling. The solution involves using a custom CSS override with absolute positioning within the BloX widget's style field, tested on Sisense L2026.1.2, applicable for both cloud and on-premises setups. The CSS sets the buttons' position using the class .carousel-button, ensuring they maintain a consistent location independent of content changes. Thalita also advises testing the solution after any Sisense updates, as class stability and CSS rules could be impacted.
Introduction
This article explains how to fix the position of the forward/backward navigation buttons in a BloX carousel widget in Sisense. By default, the carousel navigation buttons may shift or reposition depending on the size of the text block, image or content being displayed. This, for example, can create the need to scroll to go forward or backward in the carousel, especially when content has big dimensions. You can also have the need to put the buttons in a custom fixed position depending on your use case.
The solution is to apply a custom CSS override directly within the BloX widget's style field, using absolute positioning to anchor the buttons to a fixed location within the widget container
The solution is tested on Sisense L2026.1.2 and works for both cloud and on-premises deployments.
Step-by-Step Guide
1. Open your BloX widget editor
On your dashboard, click the three-dot menu on the BloX image gallery widget → Edit BloX.
2. Locate the style field in the BloX JSON
In the BloX editor, find the style property within your widget's JSON definition. This is where custom CSS rules are applied to the widget's components.
3. Identify the carousel button class
The BloX carousel navigation buttons use the class .carousel-button. You will target this class in your CSS override to control the button positioning.
4. Add the CSS override
In the style field of your BloX widget, add the following CSS:
In the end, it should look similar to this:
{
"style": ".carousel-button { position: absolute !important; top: 100px !important; transform: none !important; }",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "️{panel: Brand}",
"style": {
"text-align": "center",
"font-weight": "bold",
"font-size": "24px",
"margin": "100px"
}
},
{
"type": "TextBlock",
"text": "️{panel: Country}",
"style": {
"text-align": "center",
"font-weight": "bold",
"font-size": "24px",
"margin": "100px"
}
},
{
"type": "TextBlock",
"text": "️{panel: Category}",
"style": {
"text-align": "center",
"font-weight": "bold",
"font-size": "24px",
"margin": "100px"
}
},
{
"type": "TextBlock",
"text": "️${panel: Total Cost}",
"style": {
"text-align": "center",
"font-weight": "bold",
"font-size": "24px",
"margin": "100px"
}
},
{
"type": "TextBlock",
"text": "️${panel: Total Revenue}",
"style": {
"text-align": "center",
"font-weight": "bold",
"font-size": "24px",
"margin": "100px"
}
}
]
}
],
"actions": []
}Without style (need to scroll to see the arrow buttons):
With style (arrow buttons are in a fixed position at the top, no need to scroll):
This does three things:
position: absolute !important – removes the button from the normal document flow and positions it relative to its containing element, so it no longer shifts with image content.
top: 100px !important – anchors the button 100 pixels from the top of the widget container. Adjust this value to suit your widget's layout.
transform: none !important – overrides any default vertical centering transform that Sisense applies to the buttons, which would otherwise conflict with the absolute positioning.
5. Adjust the top value to your needs
The 100px value in top: 100px !important is a starting point. Depending on the height of your widget and the visual position you want the buttons to appear at, you can increase or decrease this value. For example:
6. Save and test
Click Apply and reload the dashboard. The navigation buttons should now remain fixed at the defined position regardless of which image is displayed in the carousel.
Important notes
!important is required: Sisense applies default inline styles to the carousel buttons. Without !important, your CSS rules may be overridden and have no visible effect.
Class name stability: The .carousel-button class is part of the BloX framework. While it is more stable than widget-level DOM classes, it is still part of a custom implementation. We recommend testing after any Sisense version upgrade.
Absolute positioning context: The position: absolute rule positions the button relative to the nearest positioned ancestor. If your BloX layout uses nested containers, you may need to also set position: relative on the parent container to ensure the button anchors correctly.
Conclusion
By adding a targeted CSS override to the BloX widget's style field, you can anchor the carousel navigation buttons to a fixed pixel position within the widget, eliminating the shifting behaviour that occurs when images of different sizes are displayed. The top value can be freely adjusted to match your dashboard's visual design, and the same pattern can be extended to control other aspects of the carousel layout such as button size, colour, or opacity.
References / Related content
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.
