How to make buttons retain their size in FXML

Question

So the Button look normal when the program starts but If the decrease the size the window with my cursor horizontally or vertically, the buttons shrink to a smaller size.

Code

FXML File

<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>
<?import java.net.URL?>

<VBox fx:id="OptionMenuLayout" alignment="TOP_CENTER" spacing="15"   prefWidth="1366"  prefHeight="768"   xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40" fx:controller="millionairetriviagame.OptionscreenController">
    <stylesheets>
        <URL value="@BackgroundImages.css" />
    </stylesheets>
    <stylesheets>
        <URL value="@ButtonLayout.css" />
    </stylesheets>
    <children>
        <ImageView fitHeight="300" fitWidth="300" smooth="true" >
            <image>
                <Image url="@ImageFiles/MillionaireLogo1.png" />
            </image>
        </ImageView>
        <Label style="-fx-font-style: Italic;" text="Click to Change the Background Color" textFill="white">
            <font>
                <javafx.scene.text.Font name="sans-serif" size="20" />  
            </font>
        </Label>      
        <HBox alignment="CENTER" spacing="200">
            <children>
                <Button id="SmallBlueBackground1"  fx:id="optionButton1" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
                <Button id="SmallBlueBackground2" fx:id="optionButton2" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
                <Button id="SmallBlueBackground3" fx:id="optionButton3" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
            </children>
        </HBox>     
        <Region prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
        <HBox alignment="BOTTOM_RIGHT" spacing="10">
            <children>
                <Button fx:id="backToMain" onAction="#goToTheMainMenu" prefHeight="30" prefWidth="200" id="ButtonLayout" text="Back to the Main Menu"> 
                    <shape>
                        <javafx.scene.shape.Rectangle arcHeight="30" arcWidth="30" height="30" width="200" />  
                    </shape>
                </Button>
            </children>
        </HBox>
    </children>
</VBox>

Here is a screenshot: Note that I resized the screen with my cursor to show this as this is right not the size of the screen

As you can see, the buttons are not their regular size.

Here is the CSS file(if need be) associated with the 3 main buttons that you see in the screenshot

#BlueBackground1
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
    -fx-smooth: true;
    -fx-background-position: center center;
}

#BlueBackground2
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
    -fx-smooth: true;
    -fx-background-position: center center;
}

#BlueBackground3
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg");
    -fx-smooth: true;
    -fx-background-position: center center;
}

#SmallBlueBackground1
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 80 50;
    -fx-background-position: center center;
    -fx-background-insets: 0, 0, 0, 0;
    -fx-border-color: black;
    -fx-border-width: 3;
    -fx-border-style: solid;
    -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); 
}

#SmallBlueBackground2
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 80 50;
    -fx-background-position: center center;
    -fx-background-insets: 0, 0, 0, 0;
    -fx-border-color: black;
    -fx-border-width: 3;
    -fx-border-style: solid;
    -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); 
}

#SmallBlueBackground3
{
    -fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 80 50;
    -fx-background-position: center center;
    -fx-background-insets: 0, 0, 0, 0;
    -fx-border-color: black;
    -fx-border-width: 3;
    -fx-border-style: solid;
    -fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0); 
}

Answer 1

If you want to have dynamic dimensions you shouldn't use min/pref/max size. Instead you should use proper layout containers. For your example you could use e. g. a

• VBox for the entire screen
• a top and a bottom Stackpane in that VBox
• a GridPane in the bottom Stackpane for the buttons

and let the button dimensions be computed.

Something like this:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <StackPane VBox.vgrow="ALWAYS" />
      <StackPane VBox.vgrow="ALWAYS">
         <children>
            <GridPane hgap="10.0" vgap="10.0">
              <columnConstraints>
                <ColumnConstraints hgrow="ALWAYS" />
                <ColumnConstraints hgrow="ALWAYS" />
              </columnConstraints>
              <rowConstraints>
                <RowConstraints vgrow="ALWAYS" />
                <RowConstraints vgrow="ALWAYS" />
              </rowConstraints>
               <children>
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" />
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" />
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" />
                  <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" />
               </children>
               <StackPane.margin>
                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
               </StackPane.margin>
            </GridPane>
         </children>
      </StackPane>
   </children>
</VBox>

Note: The "1.7976931348623157E308" values are MAX_VALUE in scene builder.

Answer 2

Set min size on the button like pref size. That should work.

@edit: And you could set the resizable attribute to false