[FIXED] JavaFX Change ScrollBar width from a ScrollPane

Issue

How can you change the width of a ScrollBar from a ScrollPane to a certain value of px? I looked at JavaFX 2.1 Change ScrollPane Scrollbar size but simply setting the font size to X px doesn't seem to work properly. I did some tests with big values and the width wasn't what I set it to be (ex: for a value of 50px the ScrollBar had width of 56px, for a value of 88px it had width of 96px, for a value of 40px it had width of 44px, for a value of 30px it had width of 33px, so no relation between then).

I need a solution that works from java code and not from a CSS file as I need to be able to dynamically set the value.

There were other suggestions to use .lookupAll but from what I understand you should avoid using that.

Code for setting width and colors:

scrollPane.setStyle("colorScrollBar: rgba(" + A function that returns RBGA + ");"
        + " colorScrollBarButton: rgba(" + A function that returns RBGA + ");" 
        + " -fx-font-size: " + 30 + "px;");

Here is the CSS file I used to change the ScrollBar (to make it transparent, to change the colors and remove some margins):

.scroll-bar {
    -fx-background-color: colorScrollBar;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.scroll-bar .thumb {
    -fx-background-color: colorScrollBarButton;
}

.scroll-bar > .increment-button > .increment-arrow,
.scroll-bar > .decrement-button > .decrement-arrow {
    -fx-background-color: colorScrollBarButton;
}

.scroll-bar > .increment-button:hover,
.scroll-bar > .decrement-button:hover {
    -fx-background-color: colorScrollBar;
}

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

.scroll-pane {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.scroll-pane:focused {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.scroll-pane .corner {
    -fx-background-insets: 0;
    -fx-padding: 0;
}

Solution

The solution I came with is to create a custom ScrollBar and use that to scroll the ScrollPane. Here is an example how to create one and bind it to the ScrollPane:

ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(paneElements); //The pane that will have the nodes
scrollPane.setLayoutX(20);
scrollPane.setLayoutY(20);
scrollPane.setPrefWidth(stage.getWidth() - 40); //This was my use case, do what you need here
scrollPane.setPrefHeight(stage.getHeight() - 66); //This was my use case, do what you need here
scrollPane.setHbarPolicy(ScrollBarPolicy.NEVER);
scrollPane.setVbarPolicy(ScrollBarPolicy.NEVER);
scrollPane.setStyle("colorScrollBar: rgba(" + I am using a function that returns RGBA + ");"
        + " colorScrollBarButton: rgba(" + I am using a function that returns RGBA + ");");
pane.getChildren().add(scrollPane);

ScrollBar scrollBarVertical = new ScrollBar();
scrollBarVertical.setLayoutX(stage.getWidth() - 20)); //Use what you need
scrollBarVertical.setLayoutY(20); //Use what you need
scrollBarVertical.setPrefHeight(stage.getHeight() - 66); //Use what you need
scrollBarVertical.setMinWidth(0); //I set it to 0 because if you need to use low values, it wasn't using values lower then 16 in prefWidth in my case
scrollBarVertical.setPrefWidth(prefWidth * 0.75)); //Use what you need
scrollBarVertical.setOrientation(Orientation.VERTICAL);
scrollBarVertical.setMin(scrollPane.getVmin());
scrollBarVertical.setMax(scrollPane.getVmax());
scrollBarVertical.valueProperty().bindBidirectional(scrollPane.vvalueProperty());
scrollBarVertical.setStyle("colorScrollBar: rgba(" + I am using a function that returns RGBA + ");"
        + " colorScrollBarButton: rgba(" + I am using a function that returns RGBA + ");");
pane.getChildren().add(scrollBarVertical);

Answered By - sValentin
Answer Checked By - Mildred Charles (JavaFixing Admin)