JavaFx elements, change the size dynamically in relationship to the size of the window

Question

I have this: A borderPane with left node a Vbox (green arrow) with button inside(orange arrow).

What I can not do is find a way to change the dimensions of Vbox(green segment) and then for the button (orange segment) in accordance with the size of the window. (when the user plays with the window size)

I prefer to find a way to set the parameters into my css files, or as a last resort inside my fxml.

.css file:

.left-borderPane{ /*this is style class for Vbox */
/*something so similar: */
-fx-min-width:30% ;
-fx-max-width:30% ;
}

.icon-settings{/*this is style class for buttons*/
-fx-shape:"M72.5,65.9 M90,50c0,8.6-2.5,16.9-7.3,24.1c-0.4,0.6-1,0.9-1.7,0.9c-0.4,0-0.8-0.1-1.1-0.3c-0.9-0.6-1.2-1.8-0.6-2.50zM69.6,50c0,3.2-0.6,6.2-1.8,9.1c-0.3,0.8-1.1,1.2-1.8,1.2c-0.2,0-0.5,0-0.8-0.1c-1-0.4c0.6-0.6,1.4-0.7,2.2-0.4C57.5,14.5,58,15.2,58,16z M35,37H14v26h21V37z M54,20.8l-15,15v28.3l15,15V20.8z";
/*something so similar: */
-fx-min-width:80% ;
-fx-max-width:80% ;
    }

score 5 · Answer 1 · answered Apr 05 '17 at 17:27

Unlike in the web, i.e. HTML+CSS, JavaFX+CSS does NOT do positioning and sizing from the CSS. You will have to bind the size of the left panel to the size of the window (through a simple calculation most probably) and the the size of the button to the size of the panel (again through a simple calculation). The following code demonstrates the principle:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BoundSizes extends Application {
    @Override
    public void start(Stage primaryStage) {
        BorderPane borderPane = new BorderPane();
        VBox vbox = new VBox();
        Button b = new Button("THE BUTTON");
        vbox.getChildren().add(b);
        borderPane.setLeft(vbox);

        // the VBox stays e.g. 1/3 of the window width
        vbox.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 3.0));
        // painting it to be obvious
        vbox.setStyle("-fx-background-color: black");

        // the button stays e.g. at half the width of the VBox
        b.prefWidthProperty().bind(Bindings.divide(vbox.widthProperty(), 2.0));

        Scene scene = new Scene(borderPane, 300, 275);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String arg[]) {
        launch(arg);
    }
}

score 2 · Accepted Answer · edited May 23 '17 at 12:32

Sizing using GridPane percentWidth/percentHeight column and row constraints

You mention that you would like to do this in CSS or FXML. CSS in JavaFX isn't going to do this, it is mainly for style and not layout. FXML is designed to accomplish most of the layout work (it's best used in conjunction with Gluon SceneBuilder).

Here is an attempt to design your layout using just FXML. The main container used is a GridPane. To set the size of grid pane regions based upon a percentage of the available area, ColumnConstraints and RowConstraints are used with a percentWidth and percentHeight. The min/max/pref size of the enclosed controls (in this case a button), are set so that they will fill the available region.

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0"
          prefWidth="300.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.65">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/>
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="30.0"/>
    <ColumnConstraints hgrow="SOMETIMES" percentWidth="5.0"/>
    <ColumnConstraints hgrow="SOMETIMES"/>
  </columnConstraints>
  <rowConstraints>
    <RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/>
    <RowConstraints vgrow="SOMETIMES"/>
    <RowConstraints percentHeight="5.0" vgrow="SOMETIMES"/>
  </rowConstraints>
  <children>
    <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0"
            mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.halignment="CENTER"
            GridPane.rowIndex="1" GridPane.valignment="CENTER"/>
  </children>
</GridPane>

Information from other similar questions

There are a bunch of ways to change element size dynamically, some of which are discussed in the following posts. It may be worthwhile reviewing different techniques to determine which is the best fit for your situation.

score 0 · Answer 3 · edited Jun 12 '19 at 05:58

0

This work for me

hbox.prefHeightProperty().bind(Bindings.divide(primaryStage.heightProperty(), 12.0));
hbox.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 12.0));

button.prefWidthProperty().bind(Bindings.divide(primaryStage.widthProperty(), 10.0));

button.prefHeightProperty().bind(Bindings.divide(primaryStage.heightProperty(), 12.0));

edited Jun 12 '19 at 05:58

Book Of Zeus

49,509
18
174
171

answered Jun 12 '19 at 05:31

Mewan

29
4

JavaFx elements, change the size dynamically in relationship to the size of the window

3 Answers3