Hi all,
When you have a lot of information to display in a table block, a horizontal bar appears.
DEMO HERE: https://test-play.softr.app/table-bar
You can change the design with the following code, to be inserted in the header code of the page settings. Change #table2 by the id of your table block. You can play with the height and the background color of the horizontal bar.
The following code is for Chrome, Safari and apparently Edge and other browsers.
<style>
#table2 .ag-body-horizontal-scroll-viewport {
scrollbar-width: thin;
scrollbar-color: #888 #f5f5f5;
}
#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
width: 10px;
height: 8px;
background-color: #f5f5f5;
border-radius: 3px;
}
#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 3px;
}
#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:active {
background-color: #FFA500;
}
#table2 .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-corner {
background-color: #f5f5f5;
}
</style>