java fx titled border can not resolve - css

Question

i found topics with similar theme, but i couldn't resolve my issue.i have a small code for gui but i can not make my window to have that border and title in the smae line. the closest i got was border and just bellow title.Here is my code:
public class NumberAddition extends Application {
BorderedTitledPane root;
GridPane pane = new GridPane();
#Override
public void start(Stage primaryStage) {
Label first_lbl = new Label("First number: ");
pane.setConstraints(first_lbl, 0, 0);
Label second_lbl = new Label("Second number: ");
pane.setConstraints(second_lbl, 0, 1);
Label third_lbl = new Label("Result: ");
pane.setConstraints(third_lbl, 0, 2);
Button btn = new Button();
btn.setText("Add");
btn.setMinWidth(70);
Button btn_1 = new Button();
btn_1.setText("Clear");
btn_1.setMinWidth(70);
Button btn_2 = new Button();
btn_2.setText("Exit");
TextField txt_1 = new TextField();
txt_1.setPrefWidth(200);
pane.setConstraints(txt_1, 1, 0);
TextField txt_2 = new TextField();
txt_2.setPrefWidth(200);
pane.setConstraints(txt_2, 1, 1);
TextField txt_3 = new TextField();
txt_3.setPrefWidth(200);
pane.setConstraints(txt_3, 1, 2);
HBox box = new HBox();
pane.setConstraints(box, 1, 4);
box.setPadding(new Insets(5, 50, 5, 50));
box.setSpacing(50);
box.getChildren().addAll(btn, btn_1);
root = new BorderedTitledPane("Number addition");
root.setPadding(new Insets(20, 20, 20, 20));
root.getStylesheets().add(getClass().getResource("bordered-titled-title.css").toExternalForm());
root.getChildren().add(pane);
pane.setPadding(new Insets(20, 20, 20, 20));
pane.setVgap(5);
pane.setHgap(5);
pane.getChildren().addAll(first_lbl, txt_1, second_lbl, txt_2, third_lbl, txt_3, box);
// root.getChildren().add(btn);
Scene scene = new Scene(root, 450, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
public class BorderedTitledPane extends StackPane{
BorderedTitledPane(String titleString) {
Label title = new Label(" " + titleString + " ");
title.getStyleClass().add("bordered-titled-title");
StackPane.setAlignment(title, Pos.TOP_LEFT);
getStyleClass().add("bordered-titled-border");
this.getChildren().addAll(title);
}
}
and css:
.label {
-fx-font: 12px sans-serif;
}
.bordered-titled-title {
-fx-background-color: white;
-fx-translate-y: -16;
}
.bordered-titled-border {
-fx-content-display: top;
-fx-border-insets: 20 15 15 15;
-fx-background-color: white;
-fx-border-color: black;
-fx-border-width: 2;
}
.bordered-titled-content {
-fx-padding: 26 10 10 10;
}

Answer 1

Use this way
public class NumberAddition extends Application {
GridPane pane = new GridPane();
#SuppressWarnings("static-access")
#Override
public void start(Stage primaryStage) {
Label first_lbl = new Label("First number: ");
pane.setConstraints(first_lbl, 0, 0);
Label second_lbl = new Label("Second number: ");
pane.setConstraints(second_lbl, 0, 1);
Label third_lbl = new Label("Result: ");
pane.setConstraints(third_lbl, 0, 2);
Button btn = new Button();
btn.setText("Add");
btn.setMinWidth(70);
Button btn_1 = new Button();
btn_1.setText("Clear");
btn_1.setMinWidth(70);
Button btn_2 = new Button();
btn_2.setText("Exit");
TextField txt_1 = new TextField();
txt_1.setPrefWidth(200);
pane.setConstraints(txt_1, 1, 0);
TextField txt_2 = new TextField();
txt_2.setPrefWidth(200);
pane.setConstraints(txt_2, 1, 1);
TextField txt_3 = new TextField();
txt_3.setPrefWidth(200);
pane.setConstraints(txt_3, 1, 2);
HBox box = new HBox();
pane.setConstraints(box, 1, 4);
box.setPadding(new Insets(5, 50, 5, 50));
box.setSpacing(50);
box.getChildren().addAll(btn, btn_1);
pane.setVgap(5);
pane.setHgap(5);
pane.getChildren().addAll(first_lbl, txt_1, second_lbl, txt_2, third_lbl, txt_3, box);
final String TITLE = "Number addition";
Pane titledContent = new BorderedTitledPane(TITLE, pane);
titledContent.setStyle("-fx-content-display: top;" + "-fx-border-insets: 20 15 15 15;"
+ "-fx-background-color: #eff1f4;" + "-fx-border-color: black;" + "-fx-border-width: 0.5;");
titledContent.setPrefSize(pane.getMaxWidth(), pane.getMaxHeight());
Scene scene = new Scene(titledContent);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
class BorderedTitledPane extends StackPane {
BorderedTitledPane(String titleString, Node content) {
Label title = new Label(" " + titleString + " ");
title.setStyle("-fx-background-color: #eff1f4;" + "-fx-translate-y: -10;");
title.setFont(Font.font(null, FontWeight.BOLD, 14));
StackPane.setAlignment(title, Pos.TOP_CENTER);
StackPane contentPane = new StackPane();
content.setStyle("-fx-padding: 20 5 5 5;");
contentPane.getChildren().add(content);
getChildren().addAll(title, contentPane);
}
}
}