I have Table visualization having background as Black color. My table visualization shows up vertical scroll bar. Default background color for scroll bar is white however only for this dashboard I want to change it to Black , same as table background color. Is it possible in Dundas BI ? Any script?
Change Scroll bar Background color to Black
Hello @prashant
I think this change it is not possible because the scroll bar can’t be edited from interface.
Can be a chance to write some script in js.overwrite file.
2 Likes
To perform an override to the scrollbar of the data grid, you need to first find and target this html element in the DOM. I was able to locate the target using the chrome debugger.
I like to use HTML Labels to have overrides appear in single dashboards. If you want to change the style of the scrollbar in the data grid, you need to target the DIV with class type “datagrid-body” as shown above. Start by adding your new style to the dashboard by placing the following code in an HTML Label control on the dashboard.
<style>
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
</style>
Once the style is available, have a script (probably ready interaction) which finds the “datagrid-body” and sets it to use our new style.
// Find the element we want to style
var datagridBody = $(".datagrid-body");
// Set the element to use the style
datagridBody.attr("id","style-1");
and look at the awesome result.
Before:
After:
3 Likes