About JavaFx Layout - layout

Question

I have a question about javafx layout, 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 normal. Footer's height is 50, but seems only about 30.
what's wrong, 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.

Answer 2

Try binding to the Stage instead of Scene.