[FIXED] How do I inline elements in JavaFX?

Issue

How do I inline elements in JavaFX? I have the following fxml

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.example.HelloController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
    </padding>
    <Label>Input file</Label>
    <TextField maxWidth="333" fx:id="inputName"/>
    <Button text="Choose" onAction="#chooseInputFile"/>
    <TextField maxWidth="333" fx:id="outputName"/>
    <Label>Output file</Label>
    <Button text="Choose" onAction="#chooseOutputFile"/>
</VBox>

However the Input file, TextField, and Button all appear on different lines. Can I make them all on one line?

Solution

Use HBox instead of VBox. HBoxes are used to arrange the elements horizontally

<?xml version = "1.0" encoding = "UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<HBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
  fx:controller="com.example.HelloController">
<padding>
    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0"/>
</padding>
<Label>Input file</Label>
<TextField maxWidth="333" fx:id="inputName"/>
<Button text="Choose" onAction="#chooseInputFile"/>
<TextField maxWidth="333" fx:id="outputName"/>
<Label>Output file</Label>
<Button text="Choose" onAction="#chooseOutputFile"/>
</HBox>

Answered By - Prajoy VB
Answer Checked By - Robin (JavaFixing Admin)