overlapping of button when size of window increases - javafx - fxml - javafx

Question

I have an issue with buttons size. When I increase the size of my window,
The buttons overlap each other. I have tried many thnigs to avoid that, for example wrap each button in an anchorpane, without success.
Here is the fxml code used for the button "devis" for example:
<AnchorPane layoutX="5.0" layoutY="71.0" maxHeight="61.25" prefHeight="58.0" prefWidth="206.0" AnchorPane.bottomAnchor="116.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="71.0">
<children>
<Button fx:id="devis" maxHeight="65.0" mnemonicParsing="false" onAction="#selectViewDevis" prefHeight="65.0" prefWidth="206.0" text="Devis" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<font>
<Font size="14.0" />
</font>
</Button>
</children>
</AnchorPane>
The 2 images of my window before and after increasing
Before increasing
After increasing
Thanks for your help,
Aaron

Answer 1

Try using a 'VBox'.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<SplitPane dividerPositions="0.35451505016722407" layoutX="189.0" layoutY="167.0" prefHeight="160.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<VBox layoutX="24.0" layoutY="14.0" minWidth="200.0" prefHeight="200.0" prefWidth="100.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<StackPane prefHeight="150.0" prefWidth="200.0">
<children>
<ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
</children>
</StackPane>
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
</children>
</VBox>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" />
</items>
</SplitPane>
</children>
</AnchorPane>