Fit VBox to parent GridPane

Question

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

Please provide an [mcve](http://stackoverflow.com/help/mcve), e.g. an FXML file (if you are using FXML) or Java code (if you are not). — jewelsea, Apr 16 '15 at 17:47
Do you want the VBox to have the same width as the `ImageView`? What is the `second column`? According to the code provided, VBox is in the second column. — ItachiUchiha, Apr 16 '15 at 19:19
I don't believe you don't understand my question. I'm afraid I cannot make it simplier... Second column is column of GridPane in which VBox is nested (grid.add(box,1,0); ). I want VBox to have the same width as this column. Surprisingly column which I'm talking about has about 1000px width, but VBox which is put inside it has 500px because it has width fit to Text objects which it contains. — Paweł Wójcik, Apr 16 '15 at 19:26
@PawełWójcik Does setting `GridPane.setHgrow(box, Priority.Always);` work for you? — ItachiUchiha, Apr 16 '15 at 21:30
@ItachiUchiha yes! it exatly does what I needed. Thanks for help — Paweł Wójcik, Apr 17 '15 at 07:41

score 3 · Accepted Answer · answered Apr 17 '15 at 08:06

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).

jewelsea · Answer 2 · 2015-04-16T21:29:59.877

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

Thanks for your attention and help, I find ur answer very useful, either — Paweł Wójcik, Apr 17 '15 at 07:42

Fit VBox to parent GridPane

2 Answers2