Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javafx2.2 making a scrollbar with transparent background

I am trying to make a scrollpane with a scrollbar that has transparent (or at least solid) background by styling it with css in javafx 2.2.3.

.scroll-pane .track{-fx-opacity: 0;}
.scroll-pane .scroll-bar{-fx-base: transparent;}

Strangely, the code above makes scrollbar black. Giving -fx-base any value with alfa does that.

Background-color has no efect at all...

What am I missing?

like image 630
Maybe Julius Avatar asked Nov 02 '12 17:11

Maybe Julius


1 Answers

Here is a sample which displays a scroll bar with a transparent background.

The sample includes some extra program logic to only show visual feedback on the scrollbar when the user hovers over the scrollbar - you may or may not need that.

The css related to the scrollbar in the sample is:

.address .scroll-pane {
  -fx-background-color: transparent;
}

.address .scroll-bar .increment-button {
  visibility: hidden;
}

.address .scroll-bar .decrement-button {
  visibility: hidden;
}

.address .scroll-bar:vertical {
  -fx-background-color: transparent;
}

.address .scroll-bar:vertical .track-background {
  visibility: hidden;
}

.address .scroll-bar:vertical .track {
  visibility: hidden;
}

.address .hide-thumb .scroll-bar:vertical .thumb {
  -fx-background-color: transparent;
}

Where the scroll bar being made transparent has the additional custom style class of address assigned to it.

I determined the css to use by studying the scroll-bar section of the default JavaFX 2.2 css stylesheet caspian.css.

Output of the sample is:

The Gettysburg address

like image 96
jewelsea Avatar answered Sep 21 '22 22:09

jewelsea