About JavaFx Layout.

Question

Hi all,I have a javafx layout question,following is my code,you can run the code directly:

import javafx.scene.Scene;
import javafx.scene.control.Button;

import javafx.scene.layout.VBox;
import javafx.scene.control.TextBox;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;

import javafx.scene.Group;
import javafx.scene.shape.Rectangle;

import javafx.stage.Stage;

/**
 * @author Administrator
 */
var headerHeight: Number = 50;
var header: Group = Group {
            var searchBox: HBox;
            content: [
                Rectangle {
                    width: bind scene.width;
                    height: bind headerHeight;
                    fill: Color.BLUE
                },
                searchBox = HBox {
                            spacing: 10
                            layoutY: bind (headerHeight - searchBox.layoutBounds.height) / 2;
                            layoutX: bind scene.width - searchBox.layoutBounds.width - 20;
                            var textBox: TextBox;
                            content: [
                                textBox = TextBox {
                                            promptText: "please input search key"
                                            columns: 20
                                            selectOnFocus: true
                                        }, Button {
                                    text: "search"
                                    strong: true
                                    action: function() {
                                        println("Button  clicked");
                                    }
                                }]
                        }
            ]
        }
var rect = Rectangle {
            width: bind 400;
            height: bind 80;
            fill: Color.YELLOW
        }
var footerHeight: Number = 50;
var footer: Group = Group {
            var bounds: Rectangle;
            content: [
                bounds = Rectangle {
                            width: bind scene.width;
                            height: bind footerHeight;
                            fill: Color.RED
                        }
            ]
        }
var scene: Scene = Scene {
            content: [
                VBox {
                    content: [
                        header,
                        rect,
                        footer
                    ]
                }
            ]
        }

function run() {
    Stage {
        scene: scene
    }
}

The scene 's height is not normally,footer' height is 50,but seems only about 30.

what's wrong,and any advise?

Thanks

Answer 1

For some reason the Scene isn't resizing to fit the full contents. I'm not sure why, but you may be able to work around this by setting scene.height = headerHeight + 80 + footerHeight.