JavaFx GUI broken after event

Question

I am new to JavaFx and i just created a GUI using JavaFx and a FXML file. The Problem is, after i call a Function from my controller all the textfields break (see pitures)

and after clicking the button it looks like this:

here is my FXML file and my Controller file:

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="TOP_LEFT" hgap="10" vgap="10">
    <padding>
        <Insets top="20" bottom="20" left="20" right="20" />
    </padding>
    <Text text="Welcome!"
          GridPane.columnIndex="0"
          GridPane.rowIndex="0"
          GridPane.columnSpan="2"
          />
    <Label text="Username: "
           GridPane.columnIndex="0"
           GridPane.rowIndex="1"
           />
    <TextField 
            GridPane.columnIndex="1"
            GridPane.rowIndex="1"
            />
    <Label text="Password: "
           GridPane.columnIndex="0"
           GridPane.rowIndex="2"
           />
    <PasswordField 
            GridPane.columnIndex="1"
            GridPane.rowIndex="2"
            />
    <Button text="Anmelden"
            GridPane.columnIndex="0"
            GridPane.rowIndex="3"
            GridPane.columnSpan="2"
            onAction="#loginButtonAction"
            />
    <Text fx:id="actionString" 
            GridPane.columnIndex="0"
            GridPane.rowIndex="4"
            />
</GridPane>

and my controller:

package sample;

import javafx.fxml.FXML;

import javafx.event.ActionEvent;
import javafx.scene.text.*;

public class Controller {

    @FXML private Text actionString;

    @FXML protected void loginButtonAction(ActionEvent event){
        actionString.setText("You have clicked the login button");

    }

}

as you may recognized, i am using linux... so is it an OS problem or code problem?

Answer 1

Text actionString should take 2 columns in the GridPane.

<Text fx:id="actionString"
      GridPane.columnIndex="0" 
      GridPane.columnSpan="2" 
      GridPane.rowIndex="4" />

Moreover, if you do not have reasons to use Text , I will advice you to use Label and set the wrapText as true . This will help to auto format label to the new line if it reaches the width of the container

<Label fx:id="actionString"
       wrapText="true" 
       GridPane.columnIndex="0"
       GridPane.columnSpan="2"
       GridPane.rowIndex="4" />