CODEWITHSUNDEEP
javajavafxfxml
M.E.
M.E.

Reputation: 5515

JavaFX: FXML how to make Buttons take the whole width of parent container

I have the following code:

<VBox id="menu" styleClass="menu" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.app.menu.MenuController">

    <stylesheets>
        <URL value="@menu.css"/>
    </stylesheets>

        <Button text="Customers" onAction="#handleCustomers" />
        <Button text="Suppliers" onAction="#handleSuppliers" />
        <Separator/>
        <Button text="Families" onAction="#handleFamilies" />
        <Button text="Products" onAction="#handleProducts" />
        <Separator/>
</VBox>

This generates a stacked set of buttons (as desired) but they do not take over the whole width of the container.

JavaFXButtons1

If I try this:

I have the following code:

<VBox id="menu" styleClass="menu" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.app.menu.MenuController">

    <stylesheets>
        <URL value="@menu.css"/>
    </stylesheets>


    <AnchorPane>
        <Button text="Customers" onAction="#handleCustomers" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Button text="Suppliers" onAction="#handleSuppliers" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Separator/>
        <Button text="Families" onAction="#handleFamilies" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Button text="Products" onAction="#handleProducts" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Separator/>
    </AnchorPane>

</VBox>

Then I get the buttons resized horizontally, but they are no longer stacked. I am not being able to implement this in Java FX using FXML.

JavaFX FXML 2

The desired output would be this:

JavaFX FXML 3

Upvotes: 1

Views: 3328

Answers (4)

Robert
Robert

Reputation: 470

Seeing as you have several buttons, if I were to assume that you want them all to be the same size then I would do something like: 

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button1" />
      <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button2" />
      <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button3" />
   </children>
</VBox>

This would make it so that the buttons would always fill up the width of its parent, meaning that the buttons will dynamically scale with the VBox. All I did was that I set the Max width to MAX_VALUE and made sure that the Pref width was set to USE_COMPUTED_SIZE.

The FXML I provided above results in:

enter image description here

Upvotes: 1

fabian
fabian

Reputation: 82491

Use a sufficiently large value for the maxWidth property of the buttons:

<VBox id="menu" styleClass="menu" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.app.menu.MenuController">

    <stylesheets>
        <URL value="@menu.css"/>
    </stylesheets>

        <Button text="Customers" maxWidth="1.7976931348623157E308" onAction="#handleCustomers" />
        <Button text="Suppliers" maxWidth="1.7976931348623157E308" onAction="#handleSuppliers" />
        <Separator/>
        <Button text="Families" maxWidth="1.7976931348623157E308" onAction="#handleFamilies" />
        <Button text="Products" maxWidth="1.7976931348623157E308" onAction="#handleProducts" />
        <Separator/>
</VBox>

This allows the Buttons to grow beyond the size calculated based on the text.

Upvotes: 6

Sambit
Sambit

Reputation: 8031

Since I do not know about your stylesheet, you can achieve using your custom stylesheet. Besides, you can manually set the prefered width and height. I provide below the fxml code snippet.

<AnchorPane focusTraversable="true" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.161" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="5.0" layoutY="14.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="593.0" text="Customer" />
      <Button layoutX="4.0" layoutY="51.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="593.0" text="Supplier" />
      <Button layoutX="4.0" layoutY="89.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="593.0" text="Families" />
   </children>
</AnchorPane>

You can see the image below. enter image description here

Upvotes: 1

Alexandr Zahkarjan
Alexandr Zahkarjan

Reputation: 21

I believe it should be comething like that

<AnchorPane>
    <Node fx:id="node" prefWidth="${node.parent.width}"></Node>
</AnchorPane>

Upvotes: 0

Related Questions