Search code examples
javajavafxnetbeansfxmlscenebuilder

How to fix Menubutton on TOP_LEFT inside HBox using

I am using a scene builder. I have an HBox and a MenuButton as a child inside it,

Position of my MenuButton changes when I resize my Scene.fxml. I want the Menu button to stick always to the top left corner of Hbox. How can i achieve this?

I have tried setting margin and Alignment of the button to the Top_left corner. It dosen't work.

Here is my Scene.fxml file.

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.MenuButton?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="563.0" prefWidth="342.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="342.0" AnchorPane.bottomAnchor="363.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <items>
            <HBox maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="46.0" prefWidth="346.0">
               <children>
                  <MenuButton alignment="TOP_LEFT" mnemonicParsing="false" prefHeight="46.0" prefWidth="56.0" HBox.hgrow="ALWAYS">
                    <items>
                      <MenuItem mnemonicParsing="false" text="Standard" />
                      <MenuItem mnemonicParsing="false" text="Scientifics" />
                    </items>
                  </MenuButton>
               </children>
            </HBox>
            <HBox prefHeight="100.0" prefWidth="200.0">
               <children>
                  <TextField editable="false" prefHeight="146.0" prefWidth="342.0" HBox.hgrow="ALWAYS" />
               </children>
            </HBox>
        </items>
      </SplitPane>
      <GridPane layoutX="-2.0" layoutY="227.0" prefHeight="363.0" prefWidth="342.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="199.8">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="-" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="70.0" prefWidth="71.0" text="+" textAlignment="CENTER" GridPane.columnIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="69.0" text="X" textAlignment="CENTER" GridPane.columnIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="74.0" text="AC" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="4" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="75.0" prefWidth="68.0" text="9" textAlignment="CENTER" GridPane.columnIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="5" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="71.0" text="6" textAlignment="CENTER" GridPane.rowIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="75.0" prefWidth="68.0" text="8" textAlignment="CENTER" GridPane.columnIndex="1">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="73.0" text="\%" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" contentDisplay="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="68.0" text="." textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="3">
               <font>
                  <Font size="32.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="0" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="67.0" text="sqrt" textAlignment="CENTER" GridPane.rowIndex="3">
               <font>
                  <Font size="20.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="74.0" text="/" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="=" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="72.0" text="1" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="69.0" text="2" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="68.0" text="3" textAlignment="CENTER" GridPane.rowIndex="2">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="72.0" text="*" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="3">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="70.0" text="Sin" textAlignment="CENTER" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="73.0" text="x^2" textAlignment="CENTER" GridPane.columnIndex="4" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="74.0" text="1/x" textAlignment="CENTER" GridPane.columnIndex="3" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="74.0" prefWidth="68.0" text="Tan" textAlignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="70.0" prefWidth="68.0" text="Cos" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.rowIndex="4">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="75.0" prefWidth="68.0" text="7" textAlignment="CENTER">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
         </children>
      </GridPane>
   </children>
</AnchorPane>][1]

https://i.sstatic.net/WSKLO.png

https://i.sstatic.net/Ewlqj.jpg

Solution

  • The issue are not the properties/layout constraints for the MenuButton but the fact that the HBox is not allowed to grow any wider than the preferred width (346.0).

    Change the value of maxWidth to USE_COMPUTED_SIZE (=-1). Alternatively simply remove the attribute to the default value that happens to be USE_COMPUTED_SIZE.

    This allows the HBox to grow to the size of the SplitPane preventing a smaller sized HBox from being centered horizontally.

      <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="342.0" AnchorPane.bottomAnchor="363.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
    <items>
        <HBox maxHeight="-Infinity" prefHeight="46.0" prefWidth="346.0"> <!-- removed maxWidth here -->
           <children>
              <MenuButton alignment="TOP_LEFT" mnemonicParsing="false" prefHeight="46.0" prefWidth="56.0" HBox.hgrow="ALWAYS">
                ...
              </MenuButton>
           </children>
        </HBox>
        ...
    </items>
  </SplitPane>