JavaFX Scene Builder crash - javafx

I have some problem with screen builder.
For some fxml it creash after load. I wwas trying many time to run it, but it block, and I must kill process.
The fxml is OK, the content is correctly displaying in my application. Here is the example of my FXML that cause crash of scene builder.
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXTabPane?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import java.lang.String?>
<?import java.net.URL?>
<AnchorPane xmlns:fx="http://javafx.com/fxml/1" id="mainApplicationWindow" fx:id="mainApplicationWindow"
styleClass="mainAnchorPane, gt-screen" xmlns="http://javafx.com/javafx/8.0.112-ea"
fx:controller="com.genealogytree.client.desktop.controllers.implementation.PaneMainApplicationWindowController">
<stylesheets>
<URL value="#/layout/style/gentree.css"/>
</stylesheets>
<children>
<SplitPane dividerPositions="0.2809364548494983" layoutX="139.0" layoutY="78.0" orientation="VERTICAL"
prefHeight="200.0" prefWidth="160.0" styleClass="gt-splitpane" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane maxHeight="220.0" minHeight="220.0" prefHeight="220.0">
<children>
<JFXTabPane fx:id="gtMainTabPane" AnchorPane.bottomAnchor="10" AnchorPane.leftAnchor="20"
AnchorPane.rightAnchor="20" AnchorPane.topAnchor="10">
<tabs>
</tabs>
</JFXTabPane>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<SplitPane dividerPositions="0.22690763052208834" layoutX="55.0" layoutY="46.0"
prefHeight="160.0" prefWidth="200.0" styleClass="gt-splitpane"
AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane id="splitPaneHorizontal" maxWidth="250.0" minWidth="250.0"
prefWidth="250.0">
<children>
<TableView fx:id="gtFamilyMemberTable" layoutX="20.0" layoutY="12.0"
onMouseClicked="#showInfoMember" prefHeight="200.0" prefWidth="200.0"
AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="10.0"
AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="5.0">
<columns>
<TableColumn fx:id="simNameColumn" maxWidth="110.0" minWidth="110.0"
prefWidth="-1.0" text="%simName"/>
<TableColumn fx:id="simSurnameColumn" maxWidth="110.0" minWidth="110.0"
prefWidth="-1.0" text="%simSurname"/>
</columns>
<styleClass>
<String fx:value="firstTypeTable"/>
<String fx:value="tableMembersAndRelations"/>
</styleClass>
</TableView>
<TableView id="gtFamilyRelationTable" fx:id="gtFamilyRelationTable"
layoutX="20.0" layoutY="12.0" onMouseClicked="#showInfoRelation"
prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="50.0"
AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0"
AnchorPane.topAnchor="5.0">
<columns>
<TableColumn fx:id="relationSimLeftColumn" maxWidth="85.0"
minWidth="85.0" prefWidth="-1.0" text="%relation_sim"/>
<TableColumn fx:id="relationTypeColumn" maxWidth="50.0" minWidth="50.0"
prefWidth="-1.0" text="%relation_type"/>
<TableColumn fx:id="relationSimRightColumn" maxWidth="85.0"
minWidth="85.0" prefWidth="-1.0" text="%relation_sim"/>
</columns>
<styleClass>
<String fx:value="firstTypeTable"/>
<String fx:value="tableMembersAndRelations"/>
</styleClass>
</TableView>
<AnchorPane id="anchorToogleButtons" prefHeight="25.0"
AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10"
AnchorPane.rightAnchor="10.0">
<ToggleButton id="buttonShowMemberTable" fx:id="buttonShowMemberTable"
layoutX="23.0" mnemonicParsing="false"
prefWidth="114.0" styleClass="toogleButtonShowTable"
text="Members" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0"/>
<ToggleButton id="buttonShowRelationTable" fx:id="buttonShowRelationTable"
layoutX="125.0" layoutY="12.0" mnemonicParsing="false"
prefWidth="114.0"
styleClass="toogleButtonShowTable" text="Relations"
AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0"/>
</AnchorPane>
</children>
</AnchorPane>
<AnchorPane fx:id="workAnchorPane">
<children>
<AnchorPane fx:id="workAnchorPaneContent" AnchorPane.bottomAnchor="50.0"
AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="20.0"
AnchorPane.topAnchor="5.0">
</AnchorPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>

Try opening SceneBuilder as an administrator first before opening the file up in your IDE. Not sure why this works but it got me up and running.

Related

JavaFX Accordion doesn't collapse when in tab pan

Ok, so I have an accordion which doesn't close properly when it's a child of a Tab Pane but works as expected outside it. I don't know where the problem stems from.
Also, I just found out that resizing the window causes the layout to display properly.
Is there a way to fix this?
Here is the FXML:
<AnchorPane maxWidth="350" minWidth="350.0" prefWidth="350.0">
<TabPane fx:id="tabPane" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0"
AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0">
<Tab text="Friends">
<AnchorPane>
<Accordion fx:id="accordion2" AnchorPane.bottomAnchor="45" AnchorPane.leftAnchor="0"
AnchorPane.rightAnchor="0"
AnchorPane.topAnchor="0" expandedPane="$friendsPane">
<panes>
<TitledPane fx:id="friendsPane" animated="false" styleClass="myClass" text="Friends">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" AnchorPane.bottomAnchor="0"
AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0"
AnchorPane.topAnchor="0">
<VBox fx:id="friends" fillWidth="true" styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</TitledPane>
<TitledPane fx:id="groupsPane" animated="true" styleClass="myClass" text="Groups">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" AnchorPane.bottomAnchor="0"
AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0"
AnchorPane.topAnchor="0">
<VBox fx:id="groups" fillWidth="true" styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</TitledPane>
</panes>
</Accordion>
<Button fx:id="activateCheck" mnemonicParsing="true" onAction="#activateCheck" text="New Group"
AnchorPane.bottomAnchor="10" AnchorPane.leftAnchor="10"/>
<Button fx:id="createGroup" mnemonicParsing="false" onAction="#createGroup" text="Create Group"
visible="false" AnchorPane.bottomAnchor="10" AnchorPane.leftAnchor="10"/>
</AnchorPane>
</Tab>
<Tab text="Received Requests">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" prefHeight="200.0" prefWidth="200.0">
<VBox fx:id="requestsRecv" minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0"
styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</Tab>
<Tab text="Sent Requests">
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" prefHeight="200.0" prefWidth="200.0">
<VBox fx:id="requestsSent" minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0"
styleClass="vbox">
<children>
</children>
</VBox>
</ScrollPane>
</Tab>
</TabPane>
</AnchorPane>
Here is what it looks like:
It was caused by a conflict between setting tab pane max and min width and having the controller set up a listener forcing the split pane that contained the tab pane divider to a set position.

Scaling/Aligning Elements in a scene when the window is being resized

So I've been searching the internet for about 2 hours now without getting anywhere. I've seen multiple posts already regarding this issue and I tried some of the solutions provided but none seemed to work... or I was just too incompetent to implement them properly...
Anyways, how can I make it so that the elements/controls adjust when the user maximizes the window?
Here's the whole FXML-File:
<GridPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="percolationapplication.controllers.Percolation">
<!-- CUSTOM WINDOW CONTROLS -->
<ToolBar fx:id="toolbar" onMousePressed="#moveableWindowOnMousePressed" onMouseDragged="#moveableWindowOnMouseDragged" prefHeight="25" minHeight="25" maxHeight="25" GridPane.columnIndex="0" GridPane.rowIndex="0">
<ImageView fitWidth="15" fitHeight="15" smooth="true">
<image>
<Image url="/resources/icon.png"/>
</image>
</ImageView>
<Text styleClass="customWindowTitle" text="Percolation Simulation"/>
<Pane HBox.hgrow="ALWAYS" />
<Button fx:id="applicationMinimize" onAction="#minimizeWindow" text="_" styleClass="customWindowButtons"/>
<Button fx:id="applicationMaximize" onAction="#maximizeWindow" text="O" styleClass="customWindowButtons"/>
<Button fx:id="applicationClose" onAction="#closeWindow" text="X" styleClass="customWindowButtons"/>
</ToolBar>
<GridPane hgap="10" GridPane.columnIndex="0" GridPane.rowIndex="1">
<!-- CANVAS -->
<Canvas fx:id="canvas" height="700" width="1100" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<!-- CONTROLS -->
<GridPane hgap="10" vgap="10" GridPane.columnIndex="1" GridPane.rowIndex="0">
<Label text="Number Of Sites:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<TextField fx:id="quantityInput" text="25" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
<Label text="Probability:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
<TextField fx:id="probabilityInput" text="0.6" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
<Label text="Algorithms:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
<HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="2">
<fx:define>
<ToggleGroup fx:id="algs"/>
</fx:define>
<RadioButton fx:id="algNormal" text="Normal" selected="true" toggleGroup="$algs"/>
<RadioButton fx:id="algStack" text="Stack" toggleGroup="$algs"/>
</HBox>
<Label text="System Percolates:" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
<Label fx:id="outputPerc" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
<Button fx:id="perc" onAction="#handlePerc" text="Go" GridPane.columnIndex="0" GridPane.rowIndex="4"/>
</GridPane>
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
</GridPane>
<stylesheets>
<URL value="#/resources/style.css"/>
</stylesheets>
</GridPane>
Here's the window in normal sized mode:
Here's the window in maximized mode. All elements should "grow" to the right and only the canvas should reach the bottom:
You can try this template. You may need to set the height on your ToolBar. You also might need to set your min, max and preferred width to the same number on your right Panel
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<AnchorPane style="-fx-background-color: green;">
<children>
<Label alignment="CENTER" text="Remove this label and put your toolbar here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" HBox.hgrow="ALWAYS">
<children>
<Label alignment="CENTER" layoutX="58.0" layoutY="50.0" text="Remove this label and put your picture here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane maxWidth="200.0" minWidth="200.0" prefWidth="200.0" style="-fx-background-color: yellow;">
<children>
<Label alignment="CENTER" layoutY="40.0" text="Remove this label and put your right panel here" textAlignment="CENTER" wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</children>
</HBox>
</children>
</VBox>

BorderPanes - JavaFX Scene Builder - Scrollbar down button not visibel

I have a small problem with the position / visibility of the lower scrollbar button of the BorderPanes (EBMTableView) - JavaFX Scene Builder
I want that if I minimize the window, the bottom scrollbar button is always visible.
Thank you very much
Please check the Code of GUI and the imgs down.
<?xml version="1.0" encoding="UTF-8"?>
<?import de.riconn.fx_ebm_control.gui.views.abgleich.*?>
<?import de.riconn.fx_ebm_control.gui.views.arzt_aktuell.*?>
<?import de.riconn.fx_ebm_control.gui.views.ebm.*?>
<?import de.riconn.fx_ebm_control.gui.views.frequenz.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.effect.Glow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity"
minHeight="-Infinity" minWidth="-Infinity" prefHeight="900.0"
prefWidth="1230.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="de.riconn.fx_ebm_control.gui.WpdlTxtControler">
<center>
<TabPane prefHeight="200.0" prefWidth="200.0"
tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER">
<tabs>
<Tab fx:id="tab_patient" onSelectionChanged="#tab_Patienten_Selected"
text="Patientenliste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="107.0" layoutY="53.0"
prefHeight="346.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<Button fx:id="btn_PatientenOpen" mnemonicParsing="false"
onAction="#openPatientenListe" text="Patientenliste öffnen.."
BorderPane.alignment="CENTER" />
</top>
<center>
<ArztAktuellTableView fx:id="tv_patientContainer"
prefHeight="494.0" prefWidth="829.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_frequenz" onSelectionChanged="#tab_Frequenz_Selected"
text="Frequenztabelle">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="109.0" layoutY="49.0"
prefHeight="346.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<Button fx:id="btn_FrequenzOpen" mnemonicParsing="false"
onAction="#openFrequenzFile" text="Frequenztabelle öffnen..."
BorderPane.alignment="CENTER" />
</top>
<center>
<FrequenzTableView fx:id="tv_frequenzContainer"
prefHeight="494.0" prefWidth="829.0" BorderPane.alignment="CENTER_RIGHT" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_abgleich" onSelectionChanged="#tab_Abgleich_Selected"
text="Abgleichsliste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="69.0" layoutY="51.0" prefHeight="346.0"
prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<HBox alignment="TOP_RIGHT" spacing="10.0">
<Button fx:id="btn_AbgleichToPdf" mnemonicParsing="false"
onAction="#viewAbgleichAsPdf" text="Als PDF öffnen..."
BorderPane.alignment="CENTER" />
<BorderPane.margin>
<Insets right="10.0" />
</BorderPane.margin>
</HBox>
</top>
<center>
<AbgleichTableView fx:id="tv_abgleichContainer"
prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
<Tab fx:id="tab_EBM" onSelectionChanged="#tab_EBM_Selected"
text="EBM Liste">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0"
prefWidth="200.0">
<children>
<BorderPane layoutX="489.0" layoutY="229.0"
prefHeight="829.0" prefWidth="1200.0" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<top>
<HBox alignment="TOP_RIGHT" spacing="10.0">
<Button fx:id="btn_minus_ebm" mnemonicParsing="false"
onAction="#delete_ebm" text="-">
</Button>
<Button fx:id="btn_plus_ebm" mnemonicParsing="false"
onAction="#add_ebm" text="+">
</Button>
<BorderPane.margin>
<Insets right="10.0" />
</BorderPane.margin>
</HBox>
</top>
<center>
<EBMTableView fx:id="tv_EBMContainer" editable="true"
prefHeight="200.0" prefWidth="200.0" tableMenuButtonVisible="true"
BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</AnchorPane>
</content>
</Tab>
</tabs>
</TabPane>
</center>
<top>
<MenuBar prefHeight="0.0" prefWidth="878.0"
BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" onAction="#openFrequenzFile"
text="Frequenztabelle öffnen..." />
<MenuItem mnemonicParsing="false" onAction="#openPatientenListe"
text="Patientenliste öffnen..." />
<MenuItem mnemonicParsing="false" onAction="#close" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem fx:id="m_add_ebm" disable="true" mnemonicParsing="false" onAction="#add_ebm"
text="hinzufügen" />
<MenuItem fx:id="m_delete_ebm" disable="true" mnemonicParsing="false" onAction="#delete_ebm"
text="löschen" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Abgleich">
<items>
<MenuItem fx:id="m_viewAbgleichAsPdf" disable="true" mnemonicParsing="false"
onAction="#viewAbgleichAsPdf" text="Als PDF öffnen" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" onAction="#openAboutDialog"
text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
</BorderPane>
JavaFX Scene Builder structure
windows with scrollButton
windows without scrollButton after minimizing
Problem Solved, just change the first BorderPane Params like this ->
<BorderPane maxHeight="0" maxWidth="0"
minHeight="0" minWidth="0" prefHeight="0"
prefWidth="1230.0" xmlns="http://javafx.com/javafx/8.0.111"
xmlns:fx="http://javafx.com/fxml/1"

JAvaFX elements resize to fit Window

I am just trying out JavaFX and am forcing my way into it because it is suppose to be the future. The problem I have is that the components don't resize with the screen. I tried to change the HBoxz HPane constraints but they seem to mess it all up.
Here is my FXML file.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<?import org.kordamp.ikonli.javafx.FontIcon?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
<children>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
<graphic>
<FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
<children>
<TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
<children>
<FontIcon iconLiteral="mdi-send" iconSize="36" text="" />
</children>
</StackPane>
<StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" prefHeight="39.0" prefWidth="231.0" text=" Añadir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
<FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
</graphic>
</Button>
</children>
</StackPane>
<HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0">
<children>
<TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="Módulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
<Text layoutX="425.0" layoutY="65.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Gestión de Roles" wrappingWidth="224.0546875">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</AnchorPane>
I tried making some changes to your fxml file for obtain a responsive layout to achieve your needs
The resizable tableView and the text moves from the center to the
left
Change the Anchor Constraints of HBox which contain the tableView
Put Gestión de Roles in HBox
This is your FXML file after changes :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
<graphic>
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
<children>
<TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
<children>
</children>
</StackPane>
<StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" prefHeight="39.0" prefWidth="231.0" text=" Añadir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
</graphic>
</Button>
</children>
</StackPane>
<HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="Módulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
<HBox alignment="CENTER" layoutX="174.0" layoutY="14.0" prefHeight="100.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="Gestión de Roles" wrappingWidth="224.0546875" HBox.hgrow="ALWAYS">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</HBox>
</children>
</AnchorPane>
I've altered AnchorPane's HBox Constraints to stay fixed, thus ensuring responsiveness
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.102" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
<children>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
<graphic>
<FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
<children>
<TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
<children>
<FontIcon iconLiteral="mdi-send" iconSize="36" text="?" />
</children>
</StackPane>
<StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" prefHeight="39.0" prefWidth="231.0" text=" A�adir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
<FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
</graphic>
</Button>
</children>
</StackPane>
<HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0" AnchorPane.bottomAnchor="8.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="152.0">
<children>
<TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="M�dulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
<Text layoutX="425.0" layoutY="65.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Gesti�n de Roles" wrappingWidth="224.0546875">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</AnchorPane>
You can also add a ScrollPane
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="#../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.102" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
<children>
<ScrollPane prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="670.0" prefWidth="1005.0">
<children>
<HBox layoutX="389.0" layoutY="30.0">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="Gesti�n de Roles" wrappingWidth="241.0546875" HBox.hgrow="NEVER">
<font>
<Font size="30.0" />
</font>
</Text>
</children>
</HBox>
<Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="25.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="50.0" prefWidth="115.0" styleClass="backButton" stylesheets="#../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="14.0">
<graphic>
<FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
</graphic>
</Button>
<StackPane layoutX="14.0" layoutY="87.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="14.0">
<children>
<TextField promptText="Buscar...">
<font>
<Font size="18.0" />
</font>
</TextField>
</children>
</StackPane>
<StackPane layoutX="280.0" layoutY="87.0" prefHeight="50.0" prefWidth="50.0">
<children>
<FontIcon iconLiteral="mdi-send" iconSize="36" text="?" />
</children>
</StackPane>
<StackPane layoutX="784.0" layoutY="81.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="21.0">
<children>
<Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" text=" A�adir Rol">
<font>
<Font size="18.0" />
</font>
<graphic>
<FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
</graphic>
</Button>
</children>
</StackPane>
<HBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" AnchorPane.bottomAnchor="8.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="152.0">
<children>
<TableView HBox.hgrow="ALWAYS">
<columns>
<TableColumn prefWidth="75.0" text="Nombre" />
<TableColumn prefWidth="75.0" text="Rol Padre" />
<TableColumn prefWidth="75.0" text="M�dulos" />
<TableColumn prefWidth="75.0" text="Permisos" />
<TableColumn prefWidth="75.0" text="Editar" />
<TableColumn prefWidth="75.0" text="Borrar" />
</columns>
</TableView>
</children>
</HBox>
</children>
</AnchorPane>
</content>
</ScrollPane>
</children>
</AnchorPane>

overlapping of button when size of window increases - javafx - fxml

I have an issue with buttons size. When I increase the size of my window,
The buttons overlap each other. I have tried many thnigs to avoid that, for example wrap each button in an anchorpane, without success.
Here is the fxml code used for the button "devis" for example:
<AnchorPane layoutX="5.0" layoutY="71.0" maxHeight="61.25" prefHeight="58.0" prefWidth="206.0" AnchorPane.bottomAnchor="116.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="71.0">
<children>
<Button fx:id="devis" maxHeight="65.0" mnemonicParsing="false" onAction="#selectViewDevis" prefHeight="65.0" prefWidth="206.0" text="Devis" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<font>
<Font size="14.0" />
</font>
</Button>
</children>
</AnchorPane>
The 2 images of my window before and after increasing
Before increasing
After increasing
Thanks for your help,
Aaron
Try using a 'VBox'.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<SplitPane dividerPositions="0.35451505016722407" layoutX="189.0" layoutY="167.0" prefHeight="160.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<VBox layoutX="24.0" layoutY="14.0" minWidth="200.0" prefHeight="200.0" prefWidth="100.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<StackPane prefHeight="150.0" prefWidth="200.0">
<children>
<ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
</children>
</StackPane>
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
<Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
</children>
</VBox>
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" />
</items>
</SplitPane>
</children>
</AnchorPane>

Resources