Search code examples
csslayoutjavafxfxmlscenebuilder

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

I have this: enter image description here 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% ;
    }
Solution

  • 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.

    dynamiclayout

    <?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.