No content in table scroll-bar should come - scrollbar

When I am having data in the tableview (which is custom component), then horizontal scrollbar is visible, but if there will no data and only columns are there then scroll-bar is not visible.
Is it because of custom component I made or my FXML needs some changes.
FXML
<AnchorPane stylesheets="prj.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" >
<children>
<ScrollPane fitToHeight="true" fitToWidth="true" VBox.vgrow="ALWAYS">
<content>
<prjTableView minWidth="500.0" maxWidth="500.0" prefWidth="500.0" VBox.vgrow="ALWAYS" fx:id="treeTableView" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<styleClass>
<String fx:value="k-table-view" />
<String fx:value="redBorder" />
</styleClass>
</prjTreeTableView>
</content>
</ScrollPane>
<HBox alignment="BASELINE_LEFT">
<children>
<HBox>
<children>
<Label text="Page Size">
<HBox.margin>
<Insets left="2.0" top="5.0" />
</HBox.margin>
</Label>
<TextField fx:id="itemsPerPage" maxWidth="-Infinity"
minWidth="-Infinity" prefHeight="22.0" prefWidth="40.0" text="50">
<HBox.margin>
<Insets left="8.0" top="6.0" />
</HBox.margin>
<tooltip>
<Tooltip text="Enter desired page number" />
</tooltip>
</TextField>
<Pagination fx:id="pagination" maxWidth="-Infinity"
minWidth="-Infinity" prefHeight="42.0" prefWidth="235.0"
translateX="1.0" translateY="1.0">
<HBox.margin>
<Insets />
</HBox.margin>
</Pagination>
<Label fx:id="displayInfo">
<HBox.margin>
<Insets top="5.0" />
</HBox.margin>
</Label>
</children>
</HBox>
</children>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>

Related

JavaFX [FXML] Keep components in the center of the window when the window is resized

I am using javaFX and FXML file to create a UI. Here is the fxml file.
<VBox alignment="CENTER" prefHeight="720.0" prefWidth="1080" spacing="20.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fi.tuni.prog3.sisu.PrimaryController">
<children>
<TabPane fx:id="tabPane" prefHeight="650.0" prefWidth="828.0" tabClosingPolicy="UNAVAILABLE">
<tabs>
<Tab text="Aloitus">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="202.0" prefWidth="289.0">
<children>
<TextField id="nimi" fx:id="nimi" layoutX="475.0" layoutY="198.0" />
<TextField id="opnro" fx:id="opnro" layoutX="475.0" layoutY="236.0" />
<Label layoutX="424.0" layoutY="203.0" text="Nimi:" />
<Label layoutX="346.0" layoutY="241.0" text="Opiskelijanumero:" />
<ComboBox id="box" fx:id="box" layoutX="400.0" layoutY="278.0" minHeight="-Infinity" minWidth="-Infinity" prefHeight="27.0" prefWidth="241.0" />
<Button fx:id="EIKU" layoutX="491.0" layoutY="315.0" mnemonicParsing="false" onAction="#EIKUPressed" prefHeight="27.0" prefWidth="60.0" text="EIKU" />
<Button layoutX="491.0" layoutY="352.0" mnemonicParsing="false" onAction="#buttonPressed" text="Valmis" />
</children>
<padding>
<Insets bottom="1.0" left="1.0" right="1.0" top="1.0" />
</padding>
</AnchorPane>
</content>
</Tab>
<Tab id="tab2" fx:id="tab2" text="Koulutus">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
<children>
<SplitPane dividerPositions="0.5" layoutX="-1.0" layoutY="-1.0" prefHeight="573.0" prefWidth="828.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<TreeView id="puu" fx:id="puu" layoutX="6.0" prefHeight="571.0" prefWidth="404.0" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="486.0" prefWidth="456.0" />
</items>
</SplitPane>
</children></AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</VBox>
My problem is the fact that the fields and buttons stay in the same place when resizing the window. So they eventually will disappear if I minimize the window a lot, and if I expand the window, they will stay the same distance away from the left and top of the window as initially.
I would like them to stay in the same place compared to all 4 sides, so that they would remain in the center of the window. How can I implement that? I've been searching for the answer and honestly feel a bit dumb for not finding it.
Thanks to #jewelsea. Using stackPane with margins solved my problem perfectly. I used SceneBuilder and added contents one by one, and edited each component's margin so that it took the desired place.

JavaFx: about nodes and scenes [duplicate]

This question already has an answer here:
How to bind Pane with another Pane in JavaFX
(1 answer)
Closed 3 years ago.
I have a problem with my project I have a stackpane that calls an fxml but my fxml gets bugged:
my fxml main:
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="650.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.ControllerHome">
<children>
<VBox layoutX="10.0" layoutY="10.0" maxWidth="-Infinity" prefWidth="150.0" style="-fx-background-color: #150;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="80.0" prefWidth="150.0" style="-fx-background-color: #0fbcf9;">
<children>
<FontAwesomeIconView fill="WHITE" glyphName="HOME" size="30" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksand; -fx-font-weight: bold; -fx-fill: white;" text="Application">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</HBox>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<VBox.margin>
<Insets top="40.0" />
</VBox.margin>
<children>
<FontAwesomeIconView fx:id="iconUser" glyphName="USERS" onMouseClicked="#xx" size="25" />
<Text fx:id="textUser" onMouseClicked="#xx" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Usuarios">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<FontAwesomeIconView glyphName="LIST" size="25" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Requisições">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
<VBox alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
<children>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<FontAwesomeIconView glyphName="COG" size="25" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Settings">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<FontAwesomeIconView glyphName="SIGN_OUT" size="25" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Logout">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
</HBox>
</children>
<VBox.margin>
<Insets />
</VBox.margin>
<padding>
<Insets bottom="20.0" />
</padding>
</VBox>
</children>
</VBox>
<HBox fx:id="subRoot" maxHeight="-Infinity" prefHeight="80.0" style="-fx-background-color: #000;" AnchorPane.leftAnchor="150.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<StackPane fx:id="mainRoot" layoutX="265.0" layoutY="256.0" prefHeight="150.0" prefWidth="200.0" style="-fx-background-color: #fff;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="150.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="80.0" />
</children>
</AnchorPane>
my controller:
public class ControllerHome implements Initializable {
#FXML
private HBox subRoot;
#FXML
private FontAwesomeIconView iconUser;
#FXML
private Text textUser;
#FXML
private StackPane mainRoot;
#FXML
void xx(MouseEvent event) throws IOException {
System.out.println("xd");
Pane content = FXMLLoader.load(getClass().getResource("mainContentUser.fxml"));
mainRoot.getChildren().addAll(content);
}
#Override
public void initialize(URL location, ResourceBundle resources) {
/*
iconUser.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
System.out.println("xd");
});
textUser.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
System.out.println("xd");
});*/
try {
HBox menu = FXMLLoader.load(getClass().getResource("menuUser.fxml"));
subRoot.getChildren().addAll(menu);
System.out.println("xdxx");
} catch (IOException ex) {
Logger.getLogger(ControllerHome.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
my fxml with anchor Pane:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="559.0" prefWidth="811.0" style="-fx-background-color: #f547;" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Button layoutX="388.0" layoutY="199.0" mnemonicParsing="false" text="Button" />
</children>
</AnchorPane>
I don't know what is going on it is not full size and is covering other parts of my screen
I don't know if it's because of the stackpane or some configuration I made.
If anyone can help me on how I can solve this
Your main problem is misusing different Pane types to achive your goal. It would be very hard to point out all the problems this layout has. That is why I publish fxml which provides expected layout. Load it in SceneBuilder and try to manipulate it for better understanding. Remember that order of addition to GridPane (same for every Pane) affects z-order of children.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?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.layout.VBox?>
<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.171">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="10.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="100.0" vgrow="ALWAYS" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="-Infinity" prefHeight="200.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<VBox style="-fx-background-color: green;" GridPane.rowIndex="1">
<children>
<VBox VBox.vgrow="ALWAYS">
<children>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</children>
</VBox>
<VBox alignment="BOTTOM_LEFT" VBox.vgrow="ALWAYS">
<children>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</children>
</VBox>
</children>
</VBox>
<StackPane prefHeight="150.0" prefWidth="200.0" style="-fx-background-color: pink;" GridPane.columnIndex="1" GridPane.rowIndex="1">
<children>
<Button mnemonicParsing="false" text="Button" />
</children>
</StackPane>
<HBox alignment="CENTER_LEFT" spacing="16.0" style="-fx-background-color: black;" GridPane.columnIndex="1">
<children>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</children>
<padding>
<Insets left="16.0" />
</padding>
</HBox>
<StackPane style="-fx-background-color: lightblue;" />
</children>
</GridPane>

Javafx Scenebuilder preview not matching actual scene

When I preview my form inside the Scene builder preview window (Window in preview mode) option everything is laid out perfectly like I want it and it is a good size. When I actually run the program (what actually is shown) and click on my button to open this new form, only about 1/4 of my labels and buttons are actually shown unless I make it full screen and everything is far more spaced out than it should be. Anyway advice to fix this?
`
<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
minWidth="-Infinity" prefHeight="1080.0" prefWidth="1920.0"
xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="sample.Controller">
<children>
<VBox layoutY="-5.0" prefHeight="811.0" prefWidth="1058.0" spacing="15.0">
<children>
<VBox prefHeight="301.0" prefWidth="488.0" spacing="20.0">
<children>
<Label alignment="TOP_CENTER" contentDisplay="CENTER" text="These are the available options for a 7 day cruise">
<font>
<Font name="System Bold" size="30.0" />
</font>
</Label>
<RadioButton mnemonicParsing="false" text="Interior room ticket $765" />
<RadioButton mnemonicParsing="false" text="Ocean view ticket $810" />
<RadioButton mnemonicParsing="false" text="Balcony ticket $1090" />
<RadioButton mnemonicParsing="false" text="Suite ticket $1560">
<padding>
<Insets top="5.0" />
</padding>
</RadioButton>
<Label text="*Prices shown are prices per person">
<font>
<Font name="System Bold Italic" size="24.0" />
</font>
</Label>
</children>
<padding>
<Insets top="20.0" />
</padding>
</VBox>
<HBox prefHeight="41.0" prefWidth="1895.0" spacing="30.0">
<children>
<CheckBox mnemonicParsing="false" text="VIP discount" />
<CheckBox mnemonicParsing="false" text="Prepaid gratitude" />
</children>
</HBox>
<Label text="Prepaid activites that can be attended by both guests">
<font>
<Font name="System Bold" size="30.0" />
</font>
<padding>
<Insets top="75.0" />
</padding>
</Label>
<HBox prefHeight="314.0" prefWidth="1895.0">
<children>
<VBox prefHeight="419.0" prefWidth="922.0" spacing="20.0">
<children>
<CheckBox mnemonicParsing="false" text="Free Internet" />
<CheckBox mnemonicParsing="false" text="Couples massage" />
<CheckBox mnemonicParsing="false" text="Horse back riding excursion" />
<CheckBox mnemonicParsing="false" text="Fitness Classes" />
<CheckBox mnemonicParsing="false" />
</children>
</VBox>
<VBox prefHeight="477.0" prefWidth="942.0" spacing="20.0">
<children>
<CheckBox mnemonicParsing="false" />
<CheckBox mnemonicParsing="false" />
<CheckBox mnemonicParsing="false" text="Casino Games" />
<CheckBox mnemonicParsing="false" text="Watch a show at the theatre" />
<CheckBox mnemonicParsing="false" text="Game Show" />
</children>
<padding>
<Insets bottom="25.0" />
</padding>
</VBox>
</children>
</HBox>
<Button mnemonicParsing="false" text="Calculate total price" />
</children>
<padding>
<Insets bottom="10.0" left="20.0" />
</padding>
</VBox>
</children>
</AnchorPane>
`
Main Class
I went in and got rid of most of the manual sizes. I would also set the PrimaryStage width to 800 and height to 700 and not allow resizing. Test this out.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane maxHeight="700.0" maxWidth="800.0" minHeight="700.0" minWidth="800.0" prefHeight="700.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<VBox layoutY="-5.0" spacing="15.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<VBox maxHeight="-Infinity" spacing="20.0" VBox.vgrow="ALWAYS">
<children>
<Label alignment="TOP_CENTER" contentDisplay="CENTER" text="These are the available options for a 7 day cruise">
<font>
<Font name="System Bold" size="22.0" />
</font>
</Label>
<RadioButton mnemonicParsing="false" text="Interior room ticket $765">
<font>
<Font size="18.0" />
</font>
<padding>
<Insets left="10.0" />
</padding>
</RadioButton>
<RadioButton mnemonicParsing="false" text="Ocean view ticket $810">
<font>
<Font size="18.0" />
</font>
<padding>
<Insets left="10.0" />
</padding>
</RadioButton>
<RadioButton mnemonicParsing="false" text="Balcony ticket $1090">
<font>
<Font size="18.0" />
</font>
<padding>
<Insets left="10.0" />
</padding>
</RadioButton>
<RadioButton mnemonicParsing="false" text="Suite ticket $1560">
<padding>
<Insets left="10.0" />
</padding>
<font>
<Font size="18.0" />
</font>
</RadioButton>
</children>
</VBox>
<VBox>
<children>
<Label text="*Prices shown are prices per person">
<font>
<Font name="System Bold Italic" size="16.0" />
</font>
</Label>
<HBox spacing="30.0">
<children>
<CheckBox mnemonicParsing="false" text="VIP discount">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Prepaid gratitude">
<font>
<Font size="15.0" />
</font>
</CheckBox>
</children>
<padding>
<Insets left="10.0" />
</padding>
</HBox>
</children>
</VBox>
<VBox prefHeight="200.0" prefWidth="100.0" spacing="20.0" VBox.vgrow="ALWAYS">
<children>
<Label text="Prepaid activites that can be attended by both guests" VBox.vgrow="ALWAYS">
<font>
<Font name="System Bold" size="22.0" />
</font>
</Label>
<HBox VBox.vgrow="ALWAYS">
<children>
<VBox spacing="20.0" HBox.hgrow="ALWAYS">
<children>
<CheckBox mnemonicParsing="false" text="Free Internet">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Couples massage">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Horse back riding excursion">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Fitness Classes">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false">
<font>
<Font size="15.0" />
</font>
</CheckBox>
</children>
<padding>
<Insets left="10.0" />
</padding>
</VBox>
<VBox spacing="20.0" HBox.hgrow="ALWAYS">
<children>
<CheckBox mnemonicParsing="false">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Casino Games">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Watch a show at the theatre">
<font>
<Font size="15.0" />
</font>
</CheckBox>
<CheckBox mnemonicParsing="false" text="Game Show">
<font>
<Font size="15.0" />
</font>
</CheckBox>
</children>
<padding>
<Insets bottom="25.0" />
</padding>
</VBox>
</children>
</HBox>
</children>
<VBox.margin>
<Insets top="30.0" />
</VBox.margin>
</VBox>
<Button mnemonicParsing="false" prefHeight="40.0" text="Calculate total price" />
</children>
<padding>
<Insets bottom="15.0" left="20.0" />
</padding>
</VBox>
</children>
<padding>
<Insets top="15.0" />
</padding>
</AnchorPane>

How to distribute multiple HBoxes equally in length so that they have equal spans from one side of a scene to the other

I have HBoxes nested in one HBox that spans from one side of the window to another. What I want is the length of those four HBoxes to be distributed equally so that they have the same span whenever the window is resized!
My code snippet:
<HBox prefHeight="150.0" prefWidth="200.0">
<children>
<HBox>
<children>
<Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #abb7b7;" />
</children>
<padding>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</padding>
</HBox>
<HBox>
<children>
<Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #6c7a89;" />
</children>
<padding>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</padding>
</HBox>
<HBox>
<children>
<Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #008080;" />
</children>
<padding>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</padding>
</HBox>
</children>
</HBox>
Use the hgrow property on each of the 'child' HBoxes:
<HBox prefHeight="150" prefWidth="200">
<HBox HBox.hgrow="ALWAYS">
<!-- ... -->
</HBox>
<HBox HBox.hgrow="ALWAYS">
<!-- ... -->
</HBox>
<!-- ... -->
</HBox>

Stretch Pane when re-sizing window

For some reason both my panes: gas-pumps-header and coffee-house-header won't stretch on window re-size. I'm using JavaFX Scene Builder, and I'm new to JavaFX (in case the answer is pretty basic...)
I want the panes to stretch to the sides (left and right), and fill the entire width of the window.
Here's my FXML
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<AnchorPane prefHeight="768.0" prefWidth="1024.0" xmlns:fx="http://javafx.com/fxml">
<children>
<HBox id="action-buttons-section" alignment="CENTER_LEFT" layoutY="14.0" spacing="5.0"
AnchorPane.leftAnchor="14.0">
<children>
<Button mnemonicParsing="false" text="Add Customer" />
<Button mnemonicParsing="false" text="Move Customer" />
</children>
</HBox>
<HBox id="fuel-pool-section" alignment="CENTER_LEFT" layoutY="14.0" spacing="5.0" AnchorPane.rightAnchor="16.0">
<children>
<Label text="Main Fuel Pool" />
<ProgressBar prefHeight="20.0" prefWidth="200.0" progress="0.0" />
<Button mnemonicParsing="false" text="Fill" />
</children>
</HBox>
<VBox alignment="CENTER" spacing="10.0" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="44.0">
<children>
<VBox alignment="CENTER" spacing="5.0">
<children>
<Pane id="gas-pumps-header" prefHeight="100.0" prefWidth="996.0"> <!-- first one -->
<children>
<Label layoutX="14.0" layoutY="15.0" text="Gas Pumps">
<font>
<Font name="System Bold" size="16.0" fx:id="x2" />
</font>
</Label>
<HBox id="gas-pumps-income-section" alignment="CENTER_RIGHT" layoutX="893.0" layoutY="15.0" spacing="5.0">
<children>
<Label text="Income">
<font>
<Font size="14.0" fx:id="x1" />
</font>
</Label>
<Label fx:id="gasPumpsIncomeValue" font="$x1" text="Value" />
</children>
</HBox>
</children>
</Pane>
<HBox id="gas-pumps-section" prefHeight="378.0" prefWidth="996.0" styleClass="layout" VBox.vgrow="ALWAYS">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" fx:id="x3" />
</padding>
</HBox>
</children>
</VBox>
<VBox alignment="CENTER" spacing="5.0">
<children>
<Pane id="coffee-house-header" prefHeight="100.0" prefWidth="996.0"> <!-- second one -->
<children>
<Label font="$x2" layoutX="14.0" layoutY="15.0" text="Coffee House" />
<HBox id="coffee-house-income-section" alignment="CENTER_RIGHT" layoutX="893.0" layoutY="15.0" spacing="5.0">
<children>
<Label font="$x1" text="Income" />
<Label fx:id="coffeeHouseIncomeValue" font="$x1" text="Value" />
</children>
</HBox>
</children>
</Pane>
<HBox id="coffee-house-section" padding="$x3" prefHeight="378.0" prefWidth="996.0" styleClass="layout" VBox.vgrow="ALWAYS" />
</children>
</VBox>
</children>
</VBox>
</children>
<stylesheets>
<URL value="#style.css" />
</stylesheets>
</AnchorPane>
After playing with different kinds of Panes I managed to get it to work.
I used a BorderPane and added the child nodes to the left and right of the BorderPane. Now when I re-size the window every element gets re-positioned to its relative position in the starting layout.
Here is the BorderPane part
<BorderPane id="gas-pumps-header" VBox.vgrow="SOMETIMES">
<left>
<Label text="Gas Pumps" BorderPane.alignment="CENTER_LEFT">
<font>
<Font name="System Bold" size="16.0" fx:id="x2" />
</font>
</Label>
</left>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" fx:id="x3" />
</padding>
<right>
<HBox id="gas-pumps-income-section" alignment="CENTER_RIGHT" spacing="5.0" BorderPane.alignment="CENTER_RIGHT">
<children>
<Label text="Income">
<font>
<Font size="14.0" fx:id="x1" />
</font>
</Label>
<Label fx:id="gasPumpsIncomeValue" font="$x1" text="Value" />
</children>
</HBox>
</right>
</BorderPane>
gas-pumps-header already resizes automatically as the application window size changes.
Open your fxml file in SceneBuilder (I used 1.1-b28 on win7), click on the gas-pumps-header pane in the SceneBuilder Hierarchy pane, set the style to -fx-border-color: red; choose SceneBuilder menu item Preview | Show Preview and Window and resize the preview window, you will see the red border of the gas-pumps-header change size as you resize the preview window.
I'm pretty sure the above doesn't help you that much as you probably have some issue with the layout which I can't understand from your question.
In general, I'd recommend using an appropriate subclass of Pane rather than Pane for most layouts as Pane subclasses will do more work for layout work you. Perhaps in your case a HBox would be more appropriate.

Resources