Button isn't working after putting a VBox and a StackPane into another StackPane

Question

I'm trying to get a TextField in the middle of the screen while having a Circle around it and the button below the circle. So I made a VBox with the circle and the button, and a StackPane with just the TextField. I made another StackPane to put both the VBox and the StackPane on the same scene, but now the button doesn't work. I genuinely have no idea what causes this.

The following is my code so far.

 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package circleandtextbox;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 *
 * @author diego
 */
public class CircleAndTextBox extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        int programX = 400;
        int programY = 400;
        int circleRadius = 100;
        Circle circle = new Circle(programX / 2,programY / 2,circleRadius);
        circle.setStroke(Color.RED);
        circle.setStrokeWidth(3);
        circle.setFill(Color.TRANSPARENT);
        
        TextField input = new TextField();
        input.setMaxWidth(100);
        
        Button btn = new Button();
        btn.setText("Change the size of the circle");
        btn.setOnAction((ActionEvent event) -> {
            System.out.println("It worked!");
        });
        
        VBox root = new VBox();
        root.setAlignment(Pos.CENTER);
        root.setSpacing(10);
        root.getChildren().addAll(circle,btn);
        

        StackPane textBox = new StackPane();
        textBox.setAlignment(Pos.CENTER);
        textBox.getChildren().add(input);
        
        StackPane together = new StackPane();
        together.getChildren().addAll(root,textBox);
        
        Scene scene = new Scene(together, programX, programY);
        
        primaryStage.setTitle("Circle code");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
}

trashgod · Accepted Answer · 2020-11-17T12:12:33.500

Your second StackPane covers your VBox, hiding its Button. To see the effect, change

together.getChildren().addAll(root, textBox);

to

together.getChildren().addAll(textBox , root);

Of course, now the TextField is covered. Instead, use a single StackPane for the circle and field:

StackPane textBox = new StackPane();
textBox.setAlignment(Pos.CENTER);
textBox.getChildren().addAll(circle, input);

Then add the result to a VBox with the button.

VBox root = new VBox();
root.setAlignment(Pos.CENTER);
root.setSpacing(10);
root.setPadding(new Insets(16));
root.getChildren().addAll(textBox, btn);

Also consider using a Spinner and/or Slider, seen here, to control the size. Code as tested:

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 * @author diego
 * @see https://stackoverflow.com/a/64852023/230513
 * @see https://stackoverflow.com/a/37935114/230513
 */
public class CircleAndTextBox extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        int programX = 400;
        int programY = 400;
        int circleRadius = 100;
        Circle circle = new Circle(programX / 2,programY / 2,circleRadius);
        circle.setStroke(Color.RED);
        circle.setStrokeWidth(3);
        circle.setFill(Color.TRANSPARENT);
        
        TextField input = new TextField();
        input.setMaxWidth(100);
        
        Button btn = new Button();
        btn.setText("Change the size of the circle");
        btn.setOnAction((ActionEvent event) -> {
            System.out.println("It worked!");
        });
        
        StackPane textBox = new StackPane();
        textBox.setAlignment(Pos.CENTER);
        textBox.getChildren().addAll(circle, input);
        VBox root = new VBox();
        root.setAlignment(Pos.CENTER);
        root.setSpacing(10);
        root.setPadding(new Insets(16));
        root.getChildren().addAll(textBox, btn);
        
        Scene scene = new Scene(root);
        
        primaryStage.setTitle("Circle code");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Button isn't working after putting a VBox and a StackPane into another StackPane

1 Answers1

Linked