width is not setting for javafx VBox items?

Question

This is the code I written but width is not setting for VBox items. I'm getting all the panels same size. I need some help.

private void initComponents() {
    this.setPadding(new Insets(0,70,0,70));
    this.setSpacing(10);
    
    red1 = new StackPane();
    red1.setStyle("-fx-background-color:red;");
    red1.setPrefHeight(60);
    red1.setPrefWidth(260);
    this.setVgrow(red1, Priority.ALWAYS);
    this.getChildren().add(red1);
    red2 = new StackPane();
    red2.setStyle("-fx-background-color:red;");
    red2.setPrefHeight(60);
    red2.setPrefWidth(240);
    this.setVgrow(red2, Priority.ALWAYS);
    this.getChildren().add(red2);
       
}

private StackPane red1;
private StackPane red2;
}

Answer 1

All panes tries to layout and to resize its children if possible, and all panes are resized by their parents by respecting their content. Read the javadoc for more information.

All panes (VBox, StackPane, FlowPane, Pane etc.) are packaged into javafx.​scene.​layout package which implies these panes are used for laying out other nodes/controls.

The shapes you are actually tried to obtain are packaged into javafx.​scene.​shape package. Use them as, for instance:

red1.getChildren().add(new Rectangle(200, 100, Color.YELLOW));
...
red2.getChildren().add(new Circle(30, Color.BLUE));