CODEWITHSUNDEEP
javafx-2scrollpane
Nuntipat Narkthong
Nuntipat Narkthong

Reputation: 1397

JavaFX ScrollPane border and background

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;");

Image show the background and the border

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;");

Image show the background and the border after my best work around

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

Upvotes: 15

Views: 29052

Answers (7)

Hasan Shadi
Hasan Shadi

Reputation: 381

Honestly, your question was not clear enough, but I am only providing this answer to help others if I can.

What is causing this problem is you have the ScrollPane and inside it something called viewport that is bound to the ScrollPane. The properties that you apply for the ScrollPane object does not apply for the viewport. If you want to apply the properties for both ONLY, not the children too, you have to use the stylesheet property, not the style property itself, which uses in-line css code. For example, if you want to make the ScrollPane transparent, you have to apply the property for both, assuming the name of file is "scrollPane.css", like so: 

#mainScrollPane > .viewport {
    -fx-background-color: transparent;
}

#mainScrollPane {
    -fx-background-color: transparent;
}

However, you need to apply a special Id property for the ScrollPane object, so it does not apply for the children:

  ScrollPane scrollPane = new ScrollPane(root);
  scrollPane.setId("mainScrollPane");
  scrollPane.getStyleSheets().add("scrollPane.css");

Upvotes: 2

Jack J
Jack J

Reputation: 1644

Rather than use FXML or CSS I prefer to consume the event, but this only works on the portion that has content. If your scrollPane is larger than its content you also have to fill the remaining space.

scrollPane.getContent().setOnMousePressed(Event::consume);
scrollPane.setFitToHeight(true);
scrollPane.setFitToWidth(true);

Upvotes: 0

juung666
juung666

Reputation: 825

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.

Upvotes: 2

Howard J
Howard J

Reputation: 421

Try use this first

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

Before setting the background color

Upvotes: 11

Mike Hearn
Mike Hearn

Reputation: 1473

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"/>

Upvotes: 33

user3477760
user3477760

Reputation: 91

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.

Upvotes: 9

Nuntipat Narkthong
Nuntipat Narkthong

Reputation: 1397

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;
}

Upvotes: 23

Related Questions