ControlsFX Validation GUI Shift - user-interface

Question

in my project I am building a JavaFX GUI that looks like this:
Everything works as I imagine.
For the validation of the text fields I would like to use ControlsFX Validation.
When I add these three lines of code and press the button so that the FXML and controller are loaded, the buttons move:
ValidationSupport val = new ValidationSupport();
val.registerValidator(this.firstNameTextfield, Validator.createEmptyValidator("Muss gefüllt sein"));
val.registerValidator(this.lastNameTextfield, Validator.createEmptyValidator("Muss gefüllt sein"));
my GUI behaves completely different. Buttons wiggle back and forth when pressed, like this:
When you leave the button with the mouse it becomes normal again.
Once I delete these three lines of code, the GUI works normally.
Once this error occurs the first time, it does not repeat in the running program.
It always happens only at the first button press.
MainApplication:
public class MainApplication extends Application {
public static void main(String[] args) {
launch();
}
#Override
public void start(Stage stage) throws IOException {
FXMLLoader fxmlLoader = new FXMLLoader(this.getClass().getClassLoader().getResource("de/bachelorarbeit/gui" +
"/mainwindow/main-application-view.fxml"));
Parent root = fxmlLoader.load();
Scene scene = new Scene(root);
scene.setFill(Color.TRANSPARENT);
stage.setScene(scene);
stage.show();
}
}
MainController:
/**
* controller for main-application-view.fxml
*/
public class MainController implements Initializable {
/**
* gui element
*/
#FXML
private BorderPane borderPane;
/** the instances are saved to save inputs when switching scenes **/
/** instanc of the home **/
private Parent homeRoot;
/** instanc of the home **/
private Parent customerRoot;
/** instanc of the article **/
private Parent articleRoot;
/** instanc of the order **/
private Parent orderRoot;
private double x, y;
#Override
public void initialize(URL location, ResourceBundle resources) {
//set home in the center
this.callHomeUI();
}
/**
* method to load a ui component
* #param ui path of fxml to be loaded
* #return instanc of Parent
*/
private Parent loadUI(String ui) {
Parent root;
try {
FXMLLoader fxmlLoader = new FXMLLoader(this.getClass().getClassLoader().getResource(ui));
root = fxmlLoader.load();
} catch (IOException e) {
//TODO Logger
throw new RuntimeException(e);
}
return root;
}
/**
* method to set the home in the center
*/
#FXML
public void callHomeUI(){
if (this.homeRoot == null) {
this.homeRoot = this.loadUI("de/bachelorarbeit/gui/home/home-view.fxml");
}
this.borderPane.setCenter(this.homeRoot);
}
/**
* method to set the home in the customer
*/
#FXML
public void callCustomerUI() {
if (this.customerRoot == null) {
this.customerRoot = this.loadUI("de/bachelorarbeit/gui/customer/customer-view.fxml");
}
this.borderPane.setCenter(this.customerRoot);
}
/**
* method to close the window
*/
#FXML
public void close() {
DataBaseManager.shutDown();
Stage stage = (Stage) this.borderPane.getScene().getWindow();
stage.close();
}
}
CustomerController with the three lines of code:
/**
* controller for customer-view.fxml
*/
public class CustomerController extends CustomerAbstractController implements Initializable {
/** gui elements **/
#FXML
private TextField firstNameTextfield;
#FXML
private TextField lastNameTextfield;
#FXML
private TextField emailTextfield;
#FXML
private DatePicker dateOfBirthPicker;
#FXML
private TextField cityTextfield;
#FXML
private TextField postalCodeTextfield;
#FXML
private TextField streetTextfield;
#FXML
private TextField houseNumberTextfield;
#FXML
private TableView<Customer> customerTableView;
#FXML
private TextField firstNameSearchTextfield;
#FXML
private TextField lastNameSearchTextfield;
#FXML
private TextField emailSearchTextfield;
#Override
public void initialize(URL location, ResourceBundle resources) {
//set listener and build customer table for search
ValidationSupport val = new ValidationSupport();
val.registerValidator(this.firstNameTextfield, Validator.createEmptyValidator("Muss gefüllt sein"));
val.registerValidator(this.lastNameTextfield, Validator.createEmptyValidator("Muss gefüllt sein"));
val.registerValidator(this.emailTextfield, Validator.createEmptyValidator("Muss gefüllt sein"));
}
}
MainApplication FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<BorderPane fx:id="borderPane" prefHeight="720.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.bachelorarbeit.gui.mainwindow.MainController">
<left>
<VBox prefHeight="1080.0" prefWidth="149.0" style="-fx-background-color: #303030;" BorderPane.alignment="CENTER">
<children>
<VBox prefHeight="633.0" prefWidth="149.0">
<children>
<Button mnemonicParsing="false" onAction="#callHomeUI" prefHeight="40.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-text-fill: #f0f0f0; -fx-font-size: 15;" styleClass="sideButtons" stylesheets="#../../css/styles.css" text="Home">
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
<cursor>
<Cursor fx:constant="DEFAULT" />
</cursor>
</Button>
<Button mnemonicParsing="false" onAction="#callCustomerUI" prefHeight="40.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-text-fill: #f0f0f0; -fx-font-size: 15;" styleClass="sideButtons" stylesheets="#../../css/styles.css" text="Kunde">
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
<cursor>
<Cursor fx:constant="DEFAULT" />
</cursor>
</Button>
<Button mnemonicParsing="false" onAction="#callArticleUI" prefHeight="40.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-text-fill: #f0f0f0; -fx-font-size: 15;" styleClass="sideButtons" stylesheets="#../../css/styles.css" text="Artikel">
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
<cursor>
<Cursor fx:constant="DEFAULT" />
</cursor>
</Button>
<Button mnemonicParsing="false" onAction="#callOrderUI" prefHeight="40.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-text-fill: #f0f0f0; -fx-font-size: 15;" styleClass="sideButtons" stylesheets="#../../css/styles.css" text="Bestellung">
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
<cursor>
<Cursor fx:constant="DEFAULT" />
</cursor>
</Button>
</children>
</VBox>
<Button mnemonicParsing="false" onAction="#close" prefHeight="40.0" prefWidth="200.0" style="-fx-background-color: transparent; -fx-text-fill: #f0f0f0; -fx-font-size: 15;" styleClass="sideButtons" stylesheets="#../../css/styles.css" text="Schließen">
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
<cursor>
<Cursor fx:constant="DEFAULT" />
</cursor>
</Button>
</children>
</VBox>
</left>
</BorderPane>
Customer FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.DatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<TabPane prefHeight="720.0" prefWidth="1080.0" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.bachelorarbeit.gui.customer.CustomerController">
<tabs>
<Tab text="Kunde anlegen">
<content>
<AnchorPane prefHeight="200.0" prefWidth="200.0">
<children>
<GridPane prefHeight="691.0" prefWidth="771.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="313.857177734375" minWidth="10.0" prefWidth="122.5714111328125" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="556.2857055664062" minWidth="10.0" prefWidth="224.14288330078125" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="556.2857055664062" minWidth="10.0" prefWidth="142.85711669921875" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="556.2857055664062" minWidth="10.0" prefWidth="351.8571472167969" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="286.4285888671875" minHeight="10.0" prefHeight="116.71429443359375" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="Bitte füllen Sie alle Angaben aus, um einen neuen Kunden anlegen zu können." GridPane.columnSpan="4" />
<Label text="Vorname:" GridPane.rowIndex="1" />
<Label text="Nachname:" GridPane.rowIndex="2" />
<Label text="E-Mail:" GridPane.rowIndex="3" />
<TextField fx:id="firstNameTextfield" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<TextField fx:id="lastNameTextfield" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<TextField fx:id="emailTextfield" GridPane.columnIndex="1" GridPane.rowIndex="3" />
<Label text="Geburtstag:" GridPane.rowIndex="4" />
<DatePicker fx:id="dateOfBirthPicker" prefHeight="25.0" prefWidth="250.0" GridPane.columnIndex="1" GridPane.rowIndex="4" />
<Label text="Stadt:" GridPane.rowIndex="5">
<GridPane.margin>
<Insets />
</GridPane.margin>
</Label>
<TextField fx:id="cityTextfield" GridPane.columnIndex="1" GridPane.rowIndex="5">
<GridPane.margin>
<Insets />
</GridPane.margin>
</TextField>
<Label text="Postleitzahl:" GridPane.columnIndex="2" GridPane.rowIndex="5">
<GridPane.margin>
<Insets left="20.0" />
</GridPane.margin>
</Label>
<TextField fx:id="postalCodeTextfield" maxWidth="100.0" GridPane.columnIndex="3" GridPane.rowIndex="5">
<GridPane.margin>
<Insets right="20.0" />
</GridPane.margin>
</TextField>
<Label text="Strasse:" GridPane.rowIndex="6" />
<TextField fx:id="streetTextfield" GridPane.columnIndex="1" GridPane.rowIndex="6" />
<Label text="Hausnummer:" GridPane.columnIndex="2" GridPane.rowIndex="6">
<GridPane.margin>
<Insets left="20.0" />
</GridPane.margin>
</Label>
<TextField fx:id="houseNumberTextfield" maxWidth="100.0" GridPane.columnIndex="3" GridPane.rowIndex="6" />
<Button mnemonicParsing="false" text="Anlegen" GridPane.rowIndex="8" />
</children>
<padding>
<Insets left="20.0" />
</padding>
</GridPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab text="Kunde bearbeiten / löschen">
<content>
<GridPane fx:id="bearbeitenGridPane" prefHeight="692.0" prefWidth="1080.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="82.0" minWidth="82.0" prefWidth="82.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="85.0" minWidth="85.0" prefWidth="85.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="85.0" minWidth="85.0" prefWidth="85.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="20.0" minHeight="20.0" prefHeight="20.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="637.5714416503906" minHeight="10.0" prefHeight="590.4285583496094" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="An dieser Stelle können Kunden bearbeitet sowie gelöscht werden." GridPane.columnSpan="4">
<GridPane.margin>
<Insets left="20.0" />
</GridPane.margin>
</Label>
<TextField fx:id="firstNameSearchTextfield" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<TextField fx:id="lastNameSearchTextfield" GridPane.columnIndex="3" GridPane.rowIndex="1" />
<TextField fx:id="emailSearchTextfield" GridPane.columnIndex="5" GridPane.rowIndex="1" />
<Label text="Vorname:" GridPane.halignment="RIGHT" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="20.0" />
</GridPane.margin>
<padding>
<Insets right="10.0" />
</padding>
</Label>
<Label text="Nachname:" GridPane.columnIndex="2" GridPane.halignment="RIGHT" GridPane.rowIndex="1">
<padding>
<Insets left="10.0" right="10.0" />
</padding>
</Label>
<Label text="E-Mail:" GridPane.columnIndex="4" GridPane.halignment="RIGHT" GridPane.rowIndex="1">
<padding>
<Insets left="10.0" right="10.0" />
</padding>
</Label>
<Button mnemonicParsing="false" stylesheets="#../../css/styles.css" text="Suchen" GridPane.columnIndex="6" GridPane.halignment="CENTER" GridPane.rowIndex="1">
<GridPane.margin>
<Insets />
</GridPane.margin>
</Button>
<Separator prefWidth="200.0" GridPane.columnSpan="7" GridPane.rowIndex="2" />
<TableView fx:id="customerTableView" stylesheets="#../../css/styles.css" GridPane.columnSpan="7" GridPane.rowIndex="3">
<GridPane.margin>
<Insets bottom="20.0" left="20.0" right="20.0" />
</GridPane.margin>
</TableView>
</children>
</GridPane>
</content>
</Tab>
</tabs>
</TabPane>
Home FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>
<AnchorPane prefHeight="720.0" prefWidth="1080.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
<children>
<GridPane prefHeight="720.0" prefWidth="1080.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="195.42855834960938" minWidth="10.0" prefWidth="130.85711669921875" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="299.5714416503906" minWidth="10.0" prefWidth="268.14288330078125" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="130.0" minHeight="130.0" prefHeight="130.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="10.0" minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="10.0" minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="10.0" minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="Thema: " GridPane.columnSpan="4" GridPane.rowIndex="4">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets left="40.0" />
</GridPane.margin>
</Label>
<ImageView fitHeight="127.0" fitWidth="383.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.halignment="CENTER">
<image>
<Image url="#../images/Ostfalia_LS_RGB_klein.jpg" />
</image>
<GridPane.margin>
<Insets top="20.0" />
</GridPane.margin>
</ImageView>
<Label text="Bachelorarbeit zur Erlangung" GridPane.columnSpan="4" GridPane.valignment="BOTTOM">
<font>
<Font name="System Bold" size="18.0" />
</font>
<GridPane.margin>
<Insets bottom="40.0" left="40.0" />
</GridPane.margin>
</Label>
<Label text="des akademischen Grades Bachelor of Science" GridPane.columnSpan="4" GridPane.valignment="BOTTOM">
<font>
<Font name="System Bold" size="18.0" />
</font>
<GridPane.margin>
<Insets bottom="10.0" left="40.0" />
</GridPane.margin>
</Label>
<Label text="Studiengang: " GridPane.columnSpan="4" GridPane.rowIndex="3">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets left="40.0" />
</GridPane.margin>
</Label>
<Label text="Hochschule: " GridPane.columnSpan="4" GridPane.rowIndex="2">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets left="40.0" />
</GridPane.margin>
</Label>
<Label text="Student:" GridPane.columnSpan="2" GridPane.rowIndex="6">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets left="40.0" />
</GridPane.margin>
</Label>
<Label text="XXX" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.halignment="LEFT" GridPane.rowIndex="7" GridPane.valignment="TOP">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets />
</GridPane.margin>
</Label>
<Label text="Erstgutachter:" GridPane.columnSpan="2" GridPane.rowIndex="9">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets left="40.0" />
</GridPane.margin>
</Label>
<Label text="Zweitgutachter:" GridPane.columnSpan="2" GridPane.rowIndex="10">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets left="40.0" />
</GridPane.margin>
</Label>
<Label text="Abgabe:" GridPane.columnSpan="2" GridPane.rowIndex="11">
<font>
<Font size="18.0" />
</font>
<GridPane.margin>
<Insets left="40.0" />
</GridPane.margin>
</Label>
<Separator prefWidth="200.0" GridPane.columnSpan="4" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="20.0" right="20.0" />
</GridPane.margin>
</Separator>
<Separator prefWidth="200.0" GridPane.columnSpan="4" GridPane.rowIndex="5">
<GridPane.margin>
<Insets left="20.0" right="200.0" />
</GridPane.margin>
</Separator>
<Separator prefWidth="200.0" GridPane.columnSpan="4" GridPane.rowIndex="8">
<GridPane.margin>
<Insets left="20.0" right="200.0" />
</GridPane.margin>
</Separator>
<Label text="Hochschule für angewandte WissenschaftenHochschule Braunschweig/Wolfenbüttel" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="2">
<font>
<Font size="18.0" />
</font>
</Label>
<Label text="Informatik Software Engineering" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="3">
<font>
<Font size="18.0" />
</font>
</Label>
<Label text="Modellbasierte Entwicklung eines Order-To-Cash-Prozesses" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="4">
<font>
<Font size="18.0" />
</font>
</Label>
<Label text="XXXX" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="6">
<font>
<Font size="18.0" />
</font>
</Label>
<Label text="XX" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="9">
<font>
<Font size="18.0" />
</font>
</Label>
<Label text="XX" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="10">
<font>
<Font size="18.0" />
</font>
</Label>
<Label text="XX.07.2022" GridPane.columnIndex="1" GridPane.columnSpan="3" GridPane.rowIndex="11">
<font>
<Font size="18.0" />
</font>
</Label>
</children>
</GridPane>
</children>
</AnchorPane>
Does anyone have any idea why this happens?
Thanks in advance.

Answer 1

I'll post an answer, even though I have no answer.
I think your issue is a bug. I don't think it is a bug in your code.
It is likely a bug in ControlsFX, or it could be (much less likely) in the JavaFX CSS processor.
I was able to recreate your issue by taking your code and making modifications to allow it to run (e.g. adding imports, removing references to code that is not there, removing references to the missing CSS stylesheet, adding a module-info, adding an opens clause to allow controlsfx to access the scene, etc). To do this I used JavaFX 18 and JDK 18 on OS X (Intel). After that, it could run.
It did not reproduce the shifting button issue you mention.
However, it did produce warning messages in the console:
Jun 07, 2022 5:35:23 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve '-fx-text-background-color' while resolving lookups for '-fx-text-fill' from rule '*.label' in stylesheet jar:file:///Users/x/.m2/repository/org/openjfx/javafx-controls/18.0.1/javafx-controls-18.0.1-mac.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss
Jun 07, 2022 5:35:23 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve '-fx-text-background-color' while resolving lookups for '-fx-text-fill' from rule '*.label' in stylesheet jar:file:///Users/x/.m2/repository/org/openjfx/javafx-controls/18.0.1/javafx-controls-18.0.1-mac.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss
Jun 07, 2022 5:35:23 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Caught 'java.lang.ClassCastException: class java.lang.String cannot be cast to class javafx.scene.paint.Color (java.lang.String is in module java.base of loader 'bootstrap'; javafx.scene.paint.Color is in module javafx.graphics#18.0.1 of loader 'app')' while converting value for '-fx-background-color' from rule '*.text-input' in stylesheet jar:file:///Users/x/.m2/repository/org/openjfx/javafx-controls/18.0.1/javafx-controls-18.0.1-mac.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss
Jun 07, 2022 5:35:23 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Caught 'java.lang.ClassCastException: class java.lang.String cannot be cast to class javafx.scene.paint.Color (java.lang.String is in module java.base of loader 'bootstrap'; javafx.scene.paint.Color is in module javafx.graphics#18.0.1 of loader 'app')' while converting value for '-fx-highlight-fill' from rule '*.text-input' in stylesheet jar:file:///Users/x/.m2/repository/org/openjfx/javafx-controls/18.0.1/javafx-controls-18.0.1-mac.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss
Jun 07, 2022 5:35:23 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve '-fx-text-inner-color' while resolving lookups for '-fx-text-fill' from rule '*.text-input' in stylesheet jar:file:///Users/x/.m2/repository/org/openjfx/javafx-controls/18.0.1/javafx-controls-18.0.1-mac.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss
Jun 07, 2022 5:35:23 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve '-fx-text-inner-color' while resolving lookups for '-fx-highlight-text-fill' from rule '*.text-input' in stylesheet jar:file:///Users/x/.m2/repository/org/openjfx/javafx-controls/18.0.1/javafx-controls-18.0.1-mac.jar!/com/sun/javafx/scene/control/skin/modena/modena.bss
Jun 07, 2022 5:35:23 PM javafx.scene.CssStyleHelper calculateValue
The above is just a snippet, hundreds of similar warnings were generated.
These indicate that the CSS system has been fundamentally broken because it is no longer resolving the mandatory looked-up colors it needs to render the scene correctly.
Nevertheless, it appeared to render OK to my screen. However, I wouldn't trust the application to continue working with so many serious warnings logged.
I removed all style values from your scene to see if they were causing some issue, but that didn't help.
I changed the validation code in the customer controller to:
ValidationSupport val = new ValidationSupport();
val.registerValidator(this.firstNameTextfield, Validator.createEmptyValidator("A"));
val.registerValidator(this.lastNameTextfield, Validator.createEmptyValidator("B"));
If you remove all but one of the validators (e.g. only register the validator "A" from the example I provided), then it works. It only fails when there are multiple validators (probably it needs to run a different code path to validate multiple fields).
I reverted the JavaFX version from 18 to 11 and it worked. So this issue is likely because of changes in later versions of JavaFX with which ControlsFX 11 is not compatible (I don't know what that would be). Because of that, I suggest that you file a bug report with ControlsFX (as previously suggested in the comments), you can link back to this question if you file an issue. If you file an issue, it will be more likely to be fixed if you provide a targeted minimal example when doing so (please read and understand the link again), as well as all version info, execution command text, build file, and console logs.
However, due to an unrelated, incompatibility of the earlier JavaFX version with later Mac OS X versions, when I switch to JavaFX 11, all text is garbled, so it is completely unusable, even though it no longer logs CSS processing errors due to adding the validation code.
Interestingly, the CSS warnings are only generated when the customer fxml is loaded into the center of the border pane that was loaded in your original main fxml. If you just set the customer fxml as the root of the scene, the error does not manifest (I don't know why this is). So you can probably work around this issue by a UI redesign (though it would be unfortunate to have to work around an issue like this in such a way).