set background color in scrollpane

Question

I have set background color in scrollpane using setStyle() method. the below code is working fine in up to "jdk-8-ea-bin-b109" java version after that java versions, these commend is not working properly but while mouse over the color has been applying.

My code is:

scrlPane.setStyle("-fx-background-color:#434547;");

Sounds like a regression, you can log a [bug against JavaFX](https://javafx-jira.kenai.com) if you wish. — jewelsea, Nov 21 '13 at 11:32
One should look for corresponding properties like backgroundProperty, borderProperty, cursorProperty and so on. — Volodymyr Levytskyi, Nov 21 '13 at 16:08

score 3 · Answer 1 · edited May 23 '17 at 12:21

3

From a question I created in regards to ScrollPane background colors in JavaFX 8: ScrollPanes in JavaFX 8 always have gray background

You may need to use this CSS so that ScrollPane styling can actually work:

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

edited May 23 '17 at 12:21

Community

1
1

answered Apr 09 '14 at 04:04

Jon Onstott

13,499
16
80
133

score 0 · Answer 2 · answered Nov 22 '13 at 04:03

try this it change scroll pane color

.scroll-bar:horizontal .thumb {
-fx-background-color:
    red,
    linear-gradient(to bottom, derive(red,95%), derive(red,10%)),
    linear-gradient(to bottom, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:vertical .thumb {
-fx-background-color:
    red,
    linear-gradient(to right, derive(red,95%), derive(red,10%)),
    linear-gradient(to right, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}

it shows like below

Scroll Pane with different color

here the global css for scroll pane for further changes;

.scroll-bar:horizontal {
-fx-background-color:
    red,
    linear-gradient(to bottom, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: 0, 1;
}
.scroll-bar:horizontal:focused {
-fx-background-color:
    -fx-focus-color,
    -fx-box-border,
    linear-gradient(to bottom, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: -1.4, 0, 1;
}
.scroll-bar:vertical {
-fx-background-color:
    red,
    linear-gradient(to top, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: 0, 1;
}
.scroll-bar:vertical:focused {
-fx-background-color:
    red,
    red,
    linear-gradient(to top, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: -1.4, 0, 1;
}
.scroll-bar:horizontal .thumb {
-fx-background-color:
    red,
    linear-gradient(to bottom, derive(red,95%), derive(red,10%)),
    linear-gradient(to bottom, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:vertical .thumb {
-fx-background-color:
    red,
    linear-gradient(to right, derive(red,95%), derive(red,10%)),
    linear-gradient(to right, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:focused .thumb {
-fx-color: -fx-focused-base;
}
.scroll-bar .thumb:hover {
-fx-color: -fx-hover-base;
}
/* Uncomment when RT-10521 is fixed.
.scroll-bar .thumb:pressed {
-fx-color: -fx-pressed-base;
}
*/
.scroll-bar:horizontal .track {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:horizontal .track-background {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
}
.scroll-bar:vertical .track {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:vertical .track-background {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
}
.scroll-bar .increment-button {
-fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
-fx-background-insets:  0, 1;
-fx-padding: 0.25em; /* 3 */
}
.scroll-bar .decrement-button {
-fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
-fx-background-insets:  0, 1;
-fx-padding: 0.25em; /* 3 */
}
.scroll-bar:horizontal .increment-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-fx-shape: "M 4 0 L 0 -3 L 0 3 z";
}
.scroll-bar:vertical .increment-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-fx-shape: "M -3 0 L 0 4 L 3 0 z";
}
.scroll-bar:horizontal .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-fx-shape: "M 0 0 L 4 -3 L 4 3 z";
}
.scroll-bar:vertical .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-fx-shape: "M -3 0 L 0 -4 L 3 0 z";
}
.scroll-bar:disabled {
-fx-opacity: -fx-disabled-opacity;
}

This is bloody bizarre we have to put up with. Instead of trivial RGB color assignment, Oracle has decided we need to go through typing pages of CSS. — ajeh, Nov 25 '13 at 21:15

set background color in scrollpane

2 Answers2