JavaFX ScrollPane border and background

Question

I'm having some problem regarding the default background and border of the ScrollPane. Using this style made the problem clearer to see.

setStyle("-fx-background-color:blue; -fx-border-color:crimson;");

I've tried this style and got no luck only the red border gone and left me with the blue one.

setStyle("-fx-background-color:blue; -fx-background-insets:0; -fx-border-color:crimson; -fx-border-width:0; -fx-border-insets:0;");

I've looked at this old post JavaFX Hide ScrollPane gray border and http://docs.oracle.com/javafx/2/ui_controls/editor.htm

This line of code doesn't work neither

scrollPane.getStyleClass().add("noborder-scroll-pane");

Thanks

Answer 1

In the current version of JavaFX 8, you can use the edge-to-edge style class to remove the border entirely:

<ScrollPane styleClass="edge-to-edge"/>

Answer 2

I have found a solution and would liked to post it here so others won't need to waste their time find it again.

By looking at the default css of JavaFx (caspian.css) which has been extracted from the library using this command.

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

I could see that the one I missed is

-fx-padding: 0;

So this is the css class I'm using.

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

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

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

Answer 3

Try use this first

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

Before setting the background color

Answer 4

There seems to be a simple solution, which is to use "-fx-background: rgb(80,80,80);", that is,

scrollPane.setStyle("-fx-background: rgb(80,80,80);");

At least this works perfectly for me, while "-fx-background-color: rgb(80,80,80);" or "-fx-control-inner-background: rgb(80,80,80);" do not work in javafx 8. "-fx-background-color: rgb(80,80,80);" did work in earlier versions of javafx.

Answer 5

You can use:

-fx-background-color: transparent;
-fx-control-inner-background: transparent;

If you set only -fx-background-color, you will see the color change is applied to only the ScrollPane's inner edges, and the color of the center area is still not changed.

The -fx-control-inner-background property will change the color of that center area.