2

I want to shorten the thumb in the scroll panes through CSS, I have used the min, max, and pref height but it does not seem to work, am I missing something or does this edit needs to be done at another level of the container (.track or .track-background).

.scroll-pane > .scroll-bar:vertical > .thumb{
   -fx-pref-height: 5;
   -fx-min-height:  5;
   -fx-max-height:  5;
artless noise
  • 21,212
  • 6
  • 68
  • 105
SergioM
  • 45
  • 5

2 Answers2

0

This cannot be done from CSS. The ScrollBar skin simply resizes the thumb to the size required based on visibleAmount and the track size. The CSS properties are simply ignored for the thumb.

It's unclear, why you would attempt to do something like this in the first place. If this worked, it would lead to unusual/unintuitive behavior of the ScrollBar, i.e. not being able to move the thumb down until the bottom reaches the end of the track and the size of the thumb not being chosen according to the size of the content of theScrollPane.

fabian
  • 80,457
  • 12
  • 86
  • 114
0

Unfortunately, as Fabian pointed out, it is not possible to do this using CSS. You can however do it by creating a copy of the ScrollBarSkin class and setting thumbLength explicitly there.

You then change the skin like so -

for (Node node : yourScrollPane.lookupAll(".scroll-bar")) {
ScrollBar s = (ScrollBar) node;

s.setSkin(new YourScrollBarSkin(s));

}

I would also recommend adding the following to disable the scrollbar when there isn't enough content to make it scrollable -

if(this.snapSizeY(Utils.clamp(this.minThumbLength(), this.trackLength * visiblePortion, this.trackLength)) == this.trackLength)
{
    incButton.setDisable(true);
    decButton.setDisable(true);
    thumb.setDisable(true);
    track.setDisable(true);
}
Oliver Dalton
  • 379
  • 2
  • 16