Problems with Gridpane fxml layout
I have a fxml dialog in SceneBuilder, which contains a Gridpane on the right side of a Splitpane contained in a BorderPane. I have two issues with this dialog that relate to each other.
- Problem #1 is the width of the last column doesn't behave as expected, given I set the max width to "USE_COMPUTED_SIZE", Hgrow = "Never" and Fill Width = false.
- Problem #2, is that the preview in SceneBuilder differs from the layout when I run the application.
The layout of the overall dialog is supposed to look like this (I highlighted where the different columns are located):
Regarding problem 1: In order to achieve this layout of the GridPane I have to constraint the max width of the last column to a value of ~60, despite that all of its Nodes, in the different rows, are limited in width. I would expect that this column stays narrow and that column 2 would take all the available space. But if I don't use this explicit max width value, the remaining space is not given to the Combobox but to the last column, which looks like this:
Regarding problem #2: In SceneBuilder the dialog looks like the images above. And if I resize the Splitpane the layout works such that I can continuesly see the buttons in the bottom and the exercise break and total duration information in the top right as long as possible. The Combobox and the table resize accordingly.Nice. However, if I run the application the right side of the Gridpane is cut off and I need to move the Splitpane to the left in order to see the missing nodes:
Here, the fxml file:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.media.MediaView?>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minWidth="1000.0" stylesheets="@application.css" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ctrl.MainCtrl">
<top>
<MenuBar BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" onAction="#exit" text="Exit" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Sessions">
<items>
<MenuItem mnemonicParsing="false" onAction="#openSessionEditor" text="Open..." />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<SplitPane fx:id="splitPane" dividerPositions="0.5" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" BorderPane.alignment="CENTER">
<items>
<StackPane fx:id="mediaPane" prefHeight="150.0" prefWidth="200.0">
<children>
<MediaView fx:id="mediaView" fitHeight="200.0" fitWidth="200.0" />
<ImageView fx:id="imageView" pickOnBounds="true" preserveRatio="true" StackPane.alignment="CENTER_RIGHT">
<StackPane.margin>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</StackPane.margin></ImageView>
</children>
</StackPane>
<GridPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minWidth="0.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="0.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="0.0" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="0.0" />
<ColumnConstraints fillWidth="false" hgrow="NEVER" minWidth="0.0" />
<ColumnConstraints fillWidth="false" hgrow="NEVER" minWidth="0.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints fillHeight="false" vgrow="NEVER" />
<RowConstraints fillHeight="false" maxHeight="-Infinity" minHeight="10.0" vgrow="NEVER" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="-Infinity" vgrow="ALWAYS" />
<RowConstraints vgrow="NEVER" />
<RowConstraints minHeight="-Infinity" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<ComboBox fx:id="sessionComboBox" maxWidth="1.7976931348623157E308" minWidth="0.0" onAction="#sessionSelected" promptText="Select session..." GridPane.columnSpan="3" GridPane.hgrow="ALWAYS">
<GridPane.margin>
<Insets bottom="12.0" left="12.0" right="24.0" top="12.0" />
</GridPane.margin>
</ComboBox>
<TableView fx:id="exerciseTable" editable="true" maxHeight="1.7976931348623157E308" minWidth="0.0" tableMenuButtonVisible="true" GridPane.columnSpan="2147483647" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
<columns>
<TableColumn fx:id="selectedColumn" maxWidth="-1.0" minWidth="30.0" prefWidth="30.0" text="Sel" />
<TableColumn fx:id="excerciseColumn" maxWidth="300.0" minWidth="80.0" prefWidth="160.0" sortable="false" text="Exercise" />
<TableColumn fx:id="setsColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Sets" />
<TableColumn fx:id="repsColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Reps" />
<TableColumn fx:id="repBreakColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Break" />
<TableColumn fx:id="introColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Intro" />
<TableColumn fx:id="startSpeedColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="Start Speed" />
<TableColumn fx:id="endSpeedColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="End Speed" />
<TableColumn fx:id="metronomColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="Metronom" />
<TableColumn fx:id="durationColumn" prefWidth="75.0" text="Duration" />
</columns>
<GridPane.margin>
<Insets bottom="6.0" left="12.0" right="24.0" />
</GridPane.margin>
</TableView>
<TextField fx:id="exerciseBreakTextField" maxWidth="40.0" minWidth="0.0" GridPane.columnIndex="4" GridPane.hgrow="NEVER">
<GridPane.margin>
<Insets bottom="12.0" right="30.0" top="12.0" />
</GridPane.margin>
</TextField>
<Label minWidth="0.0" text="Exercise break (sec)" GridPane.columnIndex="3" GridPane.hgrow="NEVER">
<GridPane.margin>
<Insets right="6.0" />
</GridPane.margin>
</Label>
<Label minWidth="0.0" text="Total duration (min)" GridPane.columnIndex="3" GridPane.rowIndex="1">
<GridPane.margin>
<Insets />
</GridPane.margin>
</Label>
<Label fx:id="durationLabel" maxWidth="40.0" text="0" GridPane.columnIndex="4" GridPane.hgrow="NEVER" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="6.0" right="30.0" />
</GridPane.margin>
</Label>
<Button fx:id="tableUpButton" maxHeight="-Infinity" mnemonicParsing="false" onAction="#exerciseUp" prefHeight="20.0" GridPane.hgrow="NEVER" GridPane.rowIndex="1" GridPane.vgrow="NEVER">
<GridPane.margin>
<Insets bottom="6.0" left="12.0" />
</GridPane.margin>
</Button>
<Button fx:id="tableDownButton" maxHeight="-Infinity" mnemonicParsing="false" onAction="#exerciseDown" prefHeight="20.0" GridPane.columnIndex="1" GridPane.hgrow="NEVER" GridPane.rowIndex="1">
<GridPane.margin>
<Insets bottom="6.0" left="6.0" />
</GridPane.margin>
</Button>
<HBox nodeOrientation="RIGHT_TO_LEFT" spacing="6.0" GridPane.columnSpan="2147483647" GridPane.hgrow="NEVER" GridPane.rowIndex="3">
<children>
<Button mnemonicParsing="false" onAction="#saveSession" text="Save">
<HBox.margin>
<Insets right="24.0" />
</HBox.margin>
</Button>
<Button minWidth="0.0" mnemonicParsing="false" onAction="#editExercise" prefWidth="50.0" text="Edit" />
<Button minWidth="0.0" mnemonicParsing="false" onAction="#deleteExercise" text="Delete" />
<Button minWidth="0.0" mnemonicParsing="false" onAction="#addNewExercise" prefWidth="50.0" text="Add" />
</children>
<GridPane.margin>
<Insets bottom="12.0" left="12.0" right="24.0" top="6.0" />
</GridPane.margin>
</HBox>
</children>
</GridPane>
</items>
</SplitPane>
</center>
<bottom>
<GridPane BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="NEVER" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="NEVER" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" vgrow="ALWAYS" />
<RowConstraints minHeight="10.0" vgrow="ALWAYS" />
</rowConstraints>
<children>
<Label text="Set:" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="30.0" top="12.0" />
</GridPane.margin>
</Label>
<Label fx:id="setLabel" text="0" GridPane.columnIndex="1" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="12.0" top="12.0" />
</GridPane.margin>
</Label>
<Label text="Repetition:" GridPane.columnIndex="2" GridPane.rowIndex="1">
<GridPane.margin>
<Insets top="12.0" />
</GridPane.margin></Label>
<Label fx:id="repLabel" text="0" GridPane.columnIndex="3" GridPane.columnSpan="2" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="12.0" top="12.0" />
</GridPane.margin>
</Label>
<Label fx:id="exerciseLabel" styleClass="exercise-header" text="Exercise" GridPane.columnSpan="5">
<GridPane.margin>
<Insets left="24.0" top="12.0" />
</GridPane.margin>
</Label>
<Button fx:id="startStopContinueButton" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#startStopContinuePressed" styleClass="start-button" text="Start" GridPane.columnSpan="5" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.rowSpan="2" GridPane.vgrow="ALWAYS">
<GridPane.margin>
<Insets bottom="24.0" left="24.0" right="12.0" top="12.0" />
</GridPane.margin>
</Button>
<Slider fx:id="speedSlider" blockIncrement="0.5" majorTickUnit="1.0" max="8.0" showTickLabels="true" showTickMarks="true" GridPane.columnIndex="6" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="2">
<GridPane.margin>
<Insets right="24.0" top="12.0" />
</GridPane.margin>
</Slider>
<Slider fx:id="volumeSlider" majorTickUnit="0.2" max="1.0" showTickMarks="true" value="1.0" GridPane.columnIndex="6" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="3">
<GridPane.margin>
<Insets bottom="24.0" right="24.0" top="12.0" />
</GridPane.margin>
</Slider>
<Label text="Speed" GridPane.columnIndex="5" GridPane.rowIndex="2">
<GridPane.margin>
<Insets left="12.0" right="6.0" top="12.0" />
</GridPane.margin>
</Label>
<Label text="Volume" GridPane.columnIndex="5" GridPane.rowIndex="3">
<GridPane.margin>
<Insets bottom="24.0" left="12.0" right="6.0" top="12.0" />
</GridPane.margin>
</Label>
</children>
</GridPane>
</bottom>
</BorderPane>
There is no magic in loading the fxml:
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
try {
URL url = getClass().getClassLoader().getResource("ui/MainScene.fxml");
Parent root = FXMLLoader.load(url);
Scene scene = new Scene(root);
primaryStage.setTitle("Sifu says...");
// primaryStage.setFullScreen(true);
// primaryStage.setFullScreenExitKeyCombination(KeyCombination.NO_MATCH);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
EDIT: If I don't set the last column width manually, then the application version does not cut the right side but looks like the 2nd picture. END_EDIT
What am I doing wrong? Thank you in advance.
Solution
Unfortunately, could not find a solution, just a minimal reproducible example for debugging/analysing: I think the behavior might be a bug.
The example below is part of the upper right gridpane in the question. The buttons in its second line are wired to increment/decrement the preferred width of the first column and log the table's pref width (along with its current width).
When run as-is, the initial layout is as expected, that is the last grid column the same as the restricted max of the upper left textField.
- incr/dec the pref column width a bit and see that the the table's pref width is at its lower boundary (400 * golden-ratio), so doesn't change
- increment further to see the misbehavior (the last grid column increasing): it starts as soon as the table's pref is increasing.
output (the numbers might depend on screen size/resolution):
pref: 247.2135948 actual: 315.3333333333333 // pref at lower boundary
pref: 247.2135948 actual: 315.3333333333333
pref: 247.66666666666669 actual: 315.3333333333333 // incr pref -> last grid column increasing
pref: 248.66666666666669 actual: 316.0
Example code
public class GridPaneTableExtract extends Application {
private Parent createContent() {
GridPane grid = new GridPane();
ObservableList<ColumnConstraints> columnConstraints = grid.getColumnConstraints();
for (int i = 0; i < 5; i++) {
if (i == 2) {
columnConstraints.add(createGrowingColumn());
} else {
columnConstraints.add(createFixedColumn());
}
}
ComboBox<String> combo = new ComboBox<>();
combo.setPromptText("some prompt");
combo.setMaxWidth(Double.MAX_VALUE);
GridPane.setHgrow(combo, Priority.ALWAYS);
GridPane.setFillWidth(combo, true);
Label fieldLabel = new Label("break in seconds: ");
TextField field = new TextField();
field.setPrefColumnCount(2);
field.setMaxWidth(Region.USE_PREF_SIZE);
// first row
grid.add(combo, 0, 0, 3, 1);
grid.add(fieldLabel, 3, 0);
grid.add(field, 4, 0);
Button up = new Button("+");
Button down = new Button("-");
Label durationLabel = new Label("Total Duration");
Label duration = new Label("000");
// second row
grid.add(up, 0, 1);
grid.add(down, 1, 1);
grid.add(durationLabel, 3, 1);
grid.add(duration, 4, 1);
// third row
TableView table = createTable(3);
grid.add(table, 0, 2, 5, 1);
GridPane.setHgrow(table, Priority.ALWAYS);
GridPane.setFillWidth(table, true);
up.setOnAction(e -> {
updateColumnPref(table, 1);
});
down.setOnAction(e -> {
updateColumnPref(table, -1);
});
grid.setGridLinesVisible(true);
BorderPane content = new BorderPane(grid);
return content;
}
private void updateColumnPref(TableView table, double delta) {
TableColumn last = (TableColumn) table.getColumns().get(0);
last.setPrefWidth(last.getPrefWidth() + delta);
System.out.println(" pref: " + table.prefWidth(-1) + " actual: " + table.getWidth());
}
private ColumnConstraints createFixedColumn() {
ColumnConstraints constraint = new ColumnConstraints();
constraint.setHgrow(Priority.NEVER);
constraint.setFillWidth(false);
return constraint;
}
private ColumnConstraints createGrowingColumn() {
ColumnConstraints constraint = new ColumnConstraints();
constraint.setHgrow(Priority.ALWAYS);
constraint.setFillWidth(true);
return constraint;
}
private TableView createTable(int colCount) {
TableView table = new TableView();
for (int i = 0; i < colCount; i++) {
TableColumn column = new TableColumn("column " + i);
table.getColumns().add(column);
}
if (colCount == 4) {
((TableColumn) table.getColumns().get(1)).setPrefWidth(40);
}
return table;
}
@Override
public void start(Stage stage) throws Exception {
stage.setScene(new Scene(createContent()));
stage.setX(20);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
- Grey Scroll Pane Background Image in JavaFX
- Java Fx arrow buttons
- Creating a round capped brush in JavaFX
- JavaFX ScrollPane not scrolling with VBox
- JavaFX sizeToScene() not respecting the Stage's max values
- JavaFX ImageView without any smoothing
- Toggle button .isSelected() is true, but visually not changing in JavaFX
- Getting The Visual Bounds of a Node
- XYChart.Data getNode() is null
- javafx bidirectional bindings out of sync
- Javafx NodeOrientation does not work as expected
- JavaFX - Different behavior of two GridPane in equal component hierarchy
- JavaFX background Setting
- Cannot invoke "javafx.scene.control.Label.setText(String)" because "this.nameLabel" is null
- How to run a JavaFX app in Eclipse with Gradle dependencies?
- Insert composite object (GridPane with TextFields) into ScrolPane
- MySQL driver does not follow when project folder copied
- Digital signature JavaFX application throwing java.lang.NoClassDefFoundError: org/bouncycastle/cert/X509CertificateHolder when executing image
- Why am I unable to set DatePicker font size?
- Populating JavaFX ControlsFX Autocompletion Textfield resulting in duplicate content
- JavaFX - Do video files contain pictures as metadata?
- How to disable smoothing for the Line node in TextFlow in JavaFX?
- How to get a resources path after jlink-ing?
- How to connect two vertical line nodes in two TextFlows in JavaFX?
- JavaFX: Resizing buttons inside a grid pane
- How can i run JavaFX 2.0 in Tizen mobile/tablet Linux, which Java or JavaFX i have to install?
- Alerts in Javafx do not close when "x" button is pressed
- JavaFX events sent to a button control: why two MOUSE_ENTERED / MOUSE_EXITED events?
- JavaFX MacOS - window not movable with transparent titlebar
- JavaFX TreeTableView, Selection Bar with default color after losing focus