javaFX width css not reacting?

css javafx width fxml scrollpane
Edwinhai picture Edwinhai · Mar 17, 2015 · Viewed 18.3k times · Source

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.

Answer

NDY picture NDY · Mar 17, 2015

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?

Related questions

JavaFX TableView text alignment

As you can see on the picture the text alignment for each colum is set to left alignment. Is there any way to change this? So far I've tried within my CSS file: #Cols{ text-align: right; } I have also tried: #…

Read More
adding css file to stylesheets in javafx

Language: JavaFX IDE: Netbeans Problem: I'm trying to add a css file to the stylesheet, but the first line of the following code always generates a NullPointerException: String css = this.getClass().getResource("double_slider.css").toExternalForm(); scene.getStylesheets().add(css); …

Read More
Styling a TableView in CSS (JavaFX)

How can I style the "THIS" point in my TableView? My CSS Code looks as follows: */* * Empty Stylesheet file. */ .root{ -fx-background-color: #262626; } .table-view{ -fx-background-color: transparent; } .table-view:focused{ -fx-background-color: transparent; } /* Spaltenköpfe Struktur column-header-background -> column-header */ .table-view .column-header-background{ -fx-background-color: linear-gradient(#131313 0%, #424141 100%); } .table-view .…

Read More