Peter S Peter S - 4 months ago 9
CSS Question

Nodes in VBox don't have the same width

I use a

VBox
to provide 3 Input fields.

They are all set up like this:

tf = new TextField();
tf.setPrefWidth(Double.MAX_VALUE);
sp = new Spinner<Integer>(0, 3, 1);
sp.setPrefWidth(Double.MAX_VALUE);
dp = new DatePicker(LocalDate.now());
dp.setPrefWidth(Double.MAX_VALUE);
vbox.getChildren().addAll(tf, sp, dp);


The width of the
TextField
and the
DatePicker
is equal. However the
Spinner
is slightly shorter.

How can I get all to the same size?

Note: Using
.setMinWidth(Control.USE_PREF_SIZE);
led to a layout Problem with the parent node (which does extend
StackPane
) of the
VBox
.

VBox for the input fields

Explination: The Component with the border extends
StackPane
and can only hold one
node
. The "node" in this case is a
VBox
, that holds the 3 Input fields and the Buttons.

Answer

Use setMaxWidth on the individual controls and call setFillWidth(true) on the VBox itself:

tf = new TextField();
tf.setMaxWidth(Double.MAX_VALUE);
sp = new Spinner<Integer>(0, 3, 1);
sp.setMaxWidth(Double.MAX_VALUE);
dp = new DatePicker(LocalDate.now());
dp.setMaxWidth(Double.MAX_VALUE);

vBox.setFillWidth(true);

vbox.getChildren().addAll(tf, sp, dp);