CODEWITHSUNDEEP
javajavafxvboxgridpane
Paweł Wójcik
Paweł Wójcik

Reputation: 133

Fit VBox to parent GridPane

I have GridPane which has two columns: first contains fixed-size ImageView, the second has VBox with Text elements. I need this VBox to fit the column width. Grid has right dimensions, ImageView too, but VBox in second column fits to text which it contains, not to parent (grid).

VBox box = new VBox();
// all three texts can be changed during program execution by user
// (so 'box' width cannot be based on children widths)
box.getChildren().addAll(new Text("1"), new Text("2"), new Text("3"));
box.setStyle("-fx-background-color: red;");

Image image = ...; // image is always 150x150 px
ImageView imgView = new ImageView(image);
GridPane grid = new GridPane();
grid.add(imgView, 0,0);
grid.add(box,1,0);
grid.add(new Text("another content"), 0,1,2,1);

According to given example i want 'box' to have the same width as second column of 'grid' object. How to fix this?

enter image description here Container with green border: GridPane grid Container with lightblue border: VBox box GridPane has red background, VBox has pink background. You can see that it clearly DOES NOT fit it's parent width.

Thanks in advance

Upvotes: 2

Views: 7238

Answers (2)

ItachiUchiha
ItachiUchiha

Reputation: 36802

You can set the Hgrow to the children of the GridPane. Setting the HGrow as Always will allow them to occupy the total width available to them.

As box is a child of gridPane, you can apply the property using the static method setHgrow

GridPane.setHgrow(box, Priority.Always);

For similar issues with height, you can use setVGrow(Node child, Priority value).

Upvotes: 3

jewelsea
jewelsea

Reputation: 159616

Understanding preferred sizing

The default sizing mechanism when components are placed in a scene without additional component, scene or stage size constraints is to size all of the components to their preferred size.

From the Scene javadoc:

The scene's size may be initialized by the application during construction. If no size is specified, the scene will automatically compute its initial size based on the preferred size of its content.

Works as expected

The code you provided is working as I would expect - all the content sized to the preferred size.

No column is 1000 pixels wide as indicated in your comment, so you must have some additional code which ensures that the layout does not behave as you wish. content

Sample Program

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class GridSample extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        VBox box = new VBox();
        box.getChildren().addAll(new Text("1"), new Text("2"), new Text("3"));
        box.setStyle("-fx-background-color: red;");

        Image image = new Image(IMAGE_LOC);
        ImageView imgView = new ImageView(image);
        GridPane grid = new GridPane();
        grid.add(imgView, 0,0);
        grid.add(box, 1, 0);
        grid.add(new Text("another content"), 0,1,2,1);

        stage.setScene(new Scene(grid));
        stage.show();

        System.out.println("Grid width:  " + grid.getWidth());
        System.out.println("Image width: " + imgView.getLayoutBounds().getWidth());
        System.out.println("Box width:   " + box.getWidth());
        final double secondColWidth = 
                grid.getWidth() - imgView.getLayoutBounds().getWidth();
        System.out.println(
                "Width of box matches width of second grid column: " +
                        (box.getWidth() == secondColWidth)
        );
    }

    public static void main(String[] args) {
        launch(args);
    }

    public static final String IMAGE_LOC =
            "http://icons.iconarchive.com/icons/designbolts/thin-download/128/Download-from-Internet-icon.png";
    // icon License: Linkware (Backlink to http://www.designbolts.com required)

}

Program Output

Grid width:  137.0
Image width: 128.0
Box width:   9.0
Width of box matches width of second grid column: true

Upvotes: 2

Related Questions