Set opacity to ScrollPane

Question

I have a GridPane with buttons inside of a ScrollPane. When the needed number of buttons is not enough to fill the ScrollPane's maximum size, it looks like the image below. I need to set this blank spot to the background color of the Pane that contains it.

I tried to set the grid's background color to the same colour of the background pane which contains it, but it just colour the lines with buttons. If I try to set the opacity of the ScrollPane to 0, it sets the opacity of the buttons too, so I can't see anything, even if I set the opacity of the buttons after that.

How could I do this??

    .
    .
    .
    GridPane grid = new GridPane();

    int i=0;
    for (int r = 0; r <= new Double(this.buttons.size()/BUTTONS_LINE).intValue(); r++) {
        for (int c = 0; c < BUTTONS_LINE; c++) {
            if(i < this.buttons.size()){
                grid.add(this.buttons.get(i), c, r);
                i++;
            }else{
                break;
            }
        }
    }
    ScrollPane spane = new ScrollPane(grid);
    grid.getStyleClass().add("grid");
    grid.setPrefWidth(0.2*Screen.getMainScreen().getWidth());
    spane.getStyleClass().add("scrollPane");
    /*spane.setOpacity(0);
    grid.setOpacity(1);
    for(int j=0; j<grid.getChildren().size();j++){
        grid.getChildren().get(j).setOpacity(1);
    }*///When I try this, buttons aren't visible neither
    spane.setMaxSize(0.2*Screen.getMainScreen().getWidth(), 0.2*Screen.getMainScreen().getHeight() );
    .
    .
    .

And the css:

.scrollPane{
    -fx-background-color: #afafaf;
    -fx-control-inner-background: #afafaf;
}

.grid{
    -fx-background-color:#afafaf;
}

score 1 · Accepted Answer · answered Mar 25 '15 at 13:09

1

This is happening because what you are seeing is actually the view-port of the scrollpane. You need to apply the background color to the view-port.

.scrollPane > .viewport {
   -fx-background-color: #afafaf;
}

answered Mar 25 '15 at 13:09

ItachiUchiha

36,135
10
122
176

Thank you, that worked, do you know where can I find some documentation about this "view-port" of the panes?? I've never heard of that before – Juan Mar 25 '15 at 14:14
Unfortunately, there is no documentation for this(or that I am aware of). But you can go through the [source code of JavaFX](http://hg.openjdk.java.net/openjfx/8u40/rt/file/eb264cdc5828/modules/) or through the [Modena css](http://hg.openjdk.java.net/openjfx/8u40/rt/file/tip/modules/controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css) file to find styleclass used to style them. Moreover, you can also use the [CSS analyzer in SceneBuilder](http://docs.oracle.com/javase/8/scene-builder-2/user-guide/stylesheet-support.htm#JSBRG150) to diagnose CSS styling of components – ItachiUchiha Mar 25 '15 at 14:24

score 0 · Answer 2 · answered Mar 25 '15 at 12:54

0

Try forcing the pane to be at least the height of the scroll pane's viewport with

grid.minHeightProperty().bind(Bindings.createDoubleBinding(() -> 
    spane.getViewportBounds().getHeight(), spane.viewportBoundsProperty());

answered Mar 25 '15 at 12:54

James_D

201,275
16
291
322

Set opacity to ScrollPane

2 Answers2