[Data Grid] Formatting DataGrid scrollbar

Forge Component
(28)
Published on 24 Sep (3 weeks ago) by OutSystems R&D
28 votes
Published on 24 Sep (3 weeks ago) by OutSystems R&D

Anyone had any luck changing the look and feel of the Data Grid Horizontal and Vertical Scrollbars?   In our application I have CSS to change scrollbars for TableRecords, but looking at the rendered HTML I'm having a hard time determining if there is a way to do this for Data Grid tables.   

Solution

OK, I just pasted these examples on how you can personalize scrollbars.

If you want to do it just on the grid, you should append .GridWrapper to it [ .GridWrapper ::-webkit-scrollbar instead of  ::-webkit-scrollbar].

And if you want to supress ScrollBar, the GRIDContainer as HideScrollbar property.


/* width */

::-webkit-scrollbar {

  width: 20px;

}


/* Track */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px blue;

  border-radius: 10px;

}


/* Handle */

::-webkit-scrollbar-thumb {

  background: red;

  border-radius: 10px;

}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #b30000;

}

Solution

Wagner Amaral wrote:

OK, I just pasted these examples on how you can personalize scrollbars.

If you want to do it just on the grid, you should append .GridWrapper to it [ .GridWrapper ::-webkit-scrollbar instead of  ::-webkit-scrollbar].

And if you want to supress ScrollBar, the GRIDContainer as HideScrollbar property.


/* width */

::-webkit-scrollbar {

  width: 20px;

}


/* Track */

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px blue;

  border-radius: 10px;

}


/* Handle */

::-webkit-scrollbar-thumb {

  background: red;

  border-radius: 10px;

}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #b30000;

}


Excellent, thank you