javaFX width css not reacting?

Question

Im trying to get a dynamic scrollpane in my JavaFX (FXML) application using CSS. my CSS for the scrollpane looks like this:

.scroll-pane {
     -fx-width: 80%;
     -fx-height: 80%;
     -fx-background-color: #FF3333;
}

the color works, but the size properties don't if I open the CSS in JavaFX scene builder it doesn't show the height and width lines at all.

I assume im missing something pretty basic, but I can't seem to figure it out.

Solution

As far as I know you cant use -fx-width/-fx-height at all and you cant use percentage values for it. The width and height of elements are read-only. You can set -fx-pref-width, -fx-pref-height, -fx-max-width, -fx-min-width, -fx-max-height and -fx-min-height to adjust the size of Java FX elements.

Check the CSS Reference Documentation out to see which CSS styles are possible.

If you want to have the size as percentage you probably need to bind the size to another property.

As example:

myView.prefWidthProperty().bind(myOtherView.widthProperty().multiply(0.75));

There is another post about percentage values with the use of a GridLayout. How do specify a width percentage in JavaFX 2 using FXML?