Add uneven spacing between elements in a HBox FXML

Question

I want to add spacing between the ComboBox and the TextField. I added spacing to the Box however since there are 4 nodes in the HBox, it adds spacing to all of them which isn't what I want. I want the TextField to be on the right of the window. I was thinking of adding an invisible separator with a large width however I read that regions can be used but I'm unsure on how to use them in FXML.

This is the code I have currently, but unsure how to add a region to it.

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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import javafx.scene.text.TextFlow?>
<BorderPane prefHeight = "200.0" prefWidth = "300.0" xmlns = 
    <top>
        <HBox alignment = "CENTER_LEFT" prefWidth = "300.0" spacing = "5">
            <padding>
                <Insets topRightBottomLeft="50" />
            </padding>
            <Label>Sort by: </Label>
            <ComboBox fx:id = "sortOrder" promptText = "Select" />

        </HBox>
    </top>
</BorderPane>

Don't hard-code preferred sizes for your containers. Can you be more specific about how you want the layout here? You have a label, a combo box, and a text field in a horizontal layout. It sounds like you want the text field to always sit at the right edge of the container, is that right? How do you want it to behave under resizing? E.g. if the user makes the window bigger, do you want the gap between the combo box and the text field to grow? Or something else? — James_D, Mar 11 '22 at 15:56
@James_D Yes, I'd like it to always sit at the right edge of the container with a bit of padding on it's right. If the user makes the window bigger, I'd like the gap to grow so that the text field stays on right. — , Mar 11 '22 at 16:03
Possible [duplicate](https://stackoverflow.com/questions/30832692/how-to-create-toolbar-with-left-center-and-right-sections-in-javafx). — jewelsea, Mar 11 '22 at 18:55

James_D · Answer 1 · 2022-03-11T16:15:55.647

Don't hard-code preferred sizes.

To make the text field sit at the right edge of the HBox, add an empty Region between the ComboBox and TextField. Set the region's hgrow parameter to ALWAYS, so any extra space will get allocated to it:

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import javafx.scene.text.TextFlow?>
<BorderPane  xmlns = "http://javafx.com/javafx/16" xmlns:fx = "http://javafx.com/fxml/1" >
    <top>
        <HBox alignment = "CENTER_LEFT"  spacing = "5">
            <padding>
                <Insets topRightBottomLeft="20" />
            </padding>
            <Label>Sort by: </Label>
            <ComboBox fx:id = "sortOrder" promptText = "Select" />
            <Label>Search by host name: </Label>
            <Region HBox.hgrow="ALWAYS" />
            <TextField fx:id = "hostName" />
        </HBox>
    </top>
</BorderPane>

After stretching the window:

You can further control the behavior if you need; e.g. to let the text field grow, set it's maxWidth to Infinity and set the maxWidth of the Region. Other solutions are possible; e.g. put the label and combo box in a HBox, and then wrap the HBox and TextField in a BorderPane, with the HBox in the left and the TextField in the right.

Add uneven spacing between elements in a HBox FXML

1 Answers1