CODEWITHSUNDEEP
javafx
Crystark
Crystark

Reputation: 4216

How to align an HRow inside a GridPane?

I'm having this weird behavior when I run my JavaFx app:

screen_capture

As you can see the elements aren't properly aligned. I've created that view using SceneBuilder and there isn't that gap in the editor.

My view is composed of a GridPane. The right cells (on the pic) of the GridPane each contains an HBox, each containing elements (buttons / text fields). I haven't configured anything specific here and am not using any CSS.

Here's the full FXML:

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

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

<AnchorPane xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MyController">
   <children>
      <GridPane hgap="3.0" vgap="3.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <columnConstraints>
          <ColumnConstraints hgrow="NEVER" />
          <ColumnConstraints hgrow="NEVER" />
            <ColumnConstraints hgrow="ALWAYS" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints vgrow="SOMETIMES" />
          <RowConstraints vgrow="SOMETIMES" />
          <RowConstraints vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Label text="label1" />
            <Label text="label2" GridPane.rowIndex="1" />
            <Button defaultButton="true" mnemonicParsing="false" onAction="#handleGo" text="Go!" GridPane.rowIndex="2">
               <graphic>
                  <TextField fx:id="iterations" alignment="CENTER" prefWidth="43.0" style="-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em;" text="50000" />
               </graphic></Button>
            <Button fx:id="selectFileButton" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#handleFileSelection" text="Select file" GridPane.columnIndex="1" GridPane.rowIndex="1" />
            <HBox spacing="3.0" GridPane.columnIndex="2">
               <children>
                  <TextField fx:id="customValue" editable="false" HBox.hgrow="ALWAYS" />
                  <Button fx:id="deleteButton" mnemonicParsing="false" onAction="#handleDelete" text="Delete" visible="false" />
               </children>
            </HBox>
            <HBox spacing="3.0" GridPane.columnIndex="2" GridPane.rowIndex="1">
               <children>
                  <Button fx:id="editButton" mnemonicParsing="false" text="Edit" />
                  <Button mnemonicParsing="false" text="New" />
               </children>
            </HBox>
            <ComboBox fx:id="selection" maxWidth="1.7976931348623157E308" onAction="#handleSelection" GridPane.columnIndex="1" />
         </children>
      </GridPane>
   </children>
</AnchorPane>

Am I missing something ?

Upvotes: 0

Views: 468

Answers (1)

Itai
Itai

Reputation: 6911

The default alignment for controls in GridPane (Maybe for controls in general?) is CENTER_LEFT, while for HBox the default is TOP_LEFT. Adding 

alignment="CENTER_LEFT"

to your HBox should align them properly.

Upvotes: 1

Related Questions