Controls need to stay centered when resizing (responsive UI, JavaFX)

I have this code

<?xml version="1.0" encoding="UTF-8"?>



<?import com.jfoenix.controls.JFXButton?>

<?import com.jfoenix.controls.JFXPasswordField?>

<?import com.jfoenix.controls.JFXTextField?>

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>

<?import javafx.scene.control.Label?>

<?import javafx.scene.image.Image?>

<?import javafx.scene.image.ImageView?>

<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.Pane?>

<?import javafx.scene.paint.LinearGradient?>

<?import javafx.scene.paint.Stop?>

<?import javafx.scene.shape.Rectangle?>

<?import javafx.scene.text.Font?>



<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

    <children>

          <Rectangle arcHeight="5.0" height="151.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">

             <fill>

                <LinearGradient endX="1.0" endY="0.5491606714628298" startX="0.36930455635491605" startY="0.8920863309352518">

                   <stops>

                      <Stop color="BLACK" />

                      <Stop color="#2f406b" offset="1.0" />

                   </stops>

                </LinearGradient>

             </fill>

          </Rectangle>

          <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0" layoutX="631.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">

             <image>

                <Image url="@../../resources/WordCrex_Logo.png" />

             </image>

          </ImageView>

          <Label fx:id="lblLogin" layoutX="655.0" layoutY="201.0" text="Login">

             <font>

                <Font name="System Bold" size="22.0" />

             </font>

          </Label>

          <Pane layoutX="502.0" layoutY="278.0" prefHeight="298.0" prefWidth="363.0">

             <children>

                <FontAwesomeIconView fx:id="icoUser" glyphName="USER" layoutX="28.0" layoutY="100.0" size="30" text="" />

                <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK" layoutX="29.0" layoutY="163.0" size="30" />

                <JFXTextField fx:id="txtUName" layoutX="70.0" layoutY="70.0" prefHeight="26.0" prefWidth="225.0" promptText="gebruikersnaam">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXTextField>

                <JFXPasswordField fx:id="txtPass" layoutX="69.0" layoutY="133.0" prefHeight="26.0" prefWidth="225.0" promptText="wachtwoord">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXPasswordField>

                <JFXButton fx:id="btnLogin" defaultButton="true" layoutX="94.0" layoutY="214.0" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXButton>

             </children>

          </Pane>

          <Label fx:id="lblWordCrex" layoutX="636.0" layoutY="119.0" text="WordCrex" textFill="WHITE">

             <font>

                <Font size="20.0" />

             </font>

          </Label>    

     </children> 

</AnchorPane>

This is how it looks default.

enter image description here

When I'm making the window bigger it looks like this.

enter image description here

And when I'm making the window smaller it looks like this.

enter image description here

I want to make this scene responsive, so that the banner on top goes the whole width of the window, the image (the throphy) centered and all of the 'login' controls centered in the page.

I've already tried with a bunch of different pane's, but I still can't figure it out. As you can see the AnchorPane has those AnchorPane.'direction'anchor = "0.0", but that's also not working for me. I got that from this tutorial, https://www.youtube.com/watch?v=5_v58NRTOTM&.

So if anyone could help me with figuring out how to make this scene responsive, I'd appreciate it a lot!

EDIT:

I now have this, but even here it won't resize with the window.

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.StackPane?>

<?import javafx.scene.shape.Rectangle?>





<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1">

   <children>

      <AnchorPane prefHeight="768.0" prefWidth="1366.0">

         <children>

            <Rectangle fill="#1d288a" height="150.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />

         </children>

      </AnchorPane>

   </children>

</StackPane>

edited Nov 14 '18 at 22:33

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

3

Try considering to layout using StackPane, HBox, VBox, GridPane etc by setting the layout policy. This will solve your responsive problem.

– Sai Dandem
Nov 14 '18 at 22:17

@SaiDandem Could you look at the edit I made?

– idontunderstandarrays
Nov 14 '18 at 22:34

Try removing the AnchorPane. Here you dont need an extra wrapper to your Rectangle.Just place the Rectangle as the children to the StackPane and remove all the AnchorPane stuff you defined in Rectangle. By default StackPane aligns its children to CENTER. You can change that by updating the alignment attribute. Also try considering @fabian answer.

– Sai Dandem
Nov 14 '18 at 22:51

add a comment |

I have this code

<?xml version="1.0" encoding="UTF-8"?>



<?import com.jfoenix.controls.JFXButton?>

<?import com.jfoenix.controls.JFXPasswordField?>

<?import com.jfoenix.controls.JFXTextField?>

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>

<?import javafx.scene.control.Label?>

<?import javafx.scene.image.Image?>

<?import javafx.scene.image.ImageView?>

<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.Pane?>

<?import javafx.scene.paint.LinearGradient?>

<?import javafx.scene.paint.Stop?>

<?import javafx.scene.shape.Rectangle?>

<?import javafx.scene.text.Font?>



<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

    <children>

          <Rectangle arcHeight="5.0" height="151.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">

             <fill>

                <LinearGradient endX="1.0" endY="0.5491606714628298" startX="0.36930455635491605" startY="0.8920863309352518">

                   <stops>

                      <Stop color="BLACK" />

                      <Stop color="#2f406b" offset="1.0" />

                   </stops>

                </LinearGradient>

             </fill>

          </Rectangle>

          <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0" layoutX="631.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">

             <image>

                <Image url="@../../resources/WordCrex_Logo.png" />

             </image>

          </ImageView>

          <Label fx:id="lblLogin" layoutX="655.0" layoutY="201.0" text="Login">

             <font>

                <Font name="System Bold" size="22.0" />

             </font>

          </Label>

          <Pane layoutX="502.0" layoutY="278.0" prefHeight="298.0" prefWidth="363.0">

             <children>

                <FontAwesomeIconView fx:id="icoUser" glyphName="USER" layoutX="28.0" layoutY="100.0" size="30" text="" />

                <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK" layoutX="29.0" layoutY="163.0" size="30" />

                <JFXTextField fx:id="txtUName" layoutX="70.0" layoutY="70.0" prefHeight="26.0" prefWidth="225.0" promptText="gebruikersnaam">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXTextField>

                <JFXPasswordField fx:id="txtPass" layoutX="69.0" layoutY="133.0" prefHeight="26.0" prefWidth="225.0" promptText="wachtwoord">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXPasswordField>

                <JFXButton fx:id="btnLogin" defaultButton="true" layoutX="94.0" layoutY="214.0" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXButton>

             </children>

          </Pane>

          <Label fx:id="lblWordCrex" layoutX="636.0" layoutY="119.0" text="WordCrex" textFill="WHITE">

             <font>

                <Font size="20.0" />

             </font>

          </Label>    

     </children> 

</AnchorPane>

This is how it looks default.

enter image description here

When I'm making the window bigger it looks like this.

enter image description here

And when I'm making the window smaller it looks like this.

enter image description here

I want to make this scene responsive, so that the banner on top goes the whole width of the window, the image (the throphy) centered and all of the 'login' controls centered in the page.

So if anyone could help me with figuring out how to make this scene responsive, I'd appreciate it a lot!

EDIT:

I now have this, but even here it won't resize with the window.

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.StackPane?>

<?import javafx.scene.shape.Rectangle?>





<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1">

   <children>

      <AnchorPane prefHeight="768.0" prefWidth="1366.0">

         <children>

            <Rectangle fill="#1d288a" height="150.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />

         </children>

      </AnchorPane>

   </children>

</StackPane>

edited Nov 14 '18 at 22:33

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

3

Try considering to layout using StackPane, HBox, VBox, GridPane etc by setting the layout policy. This will solve your responsive problem.

– Sai Dandem
Nov 14 '18 at 22:17

@SaiDandem Could you look at the edit I made?

– idontunderstandarrays
Nov 14 '18 at 22:34

Try removing the AnchorPane. Here you dont need an extra wrapper to your Rectangle.Just place the Rectangle as the children to the StackPane and remove all the AnchorPane stuff you defined in Rectangle. By default StackPane aligns its children to CENTER. You can change that by updating the alignment attribute. Also try considering @fabian answer.

– Sai Dandem
Nov 14 '18 at 22:51

add a comment |

I have this code

<?xml version="1.0" encoding="UTF-8"?>



<?import com.jfoenix.controls.JFXButton?>

<?import com.jfoenix.controls.JFXPasswordField?>

<?import com.jfoenix.controls.JFXTextField?>

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>

<?import javafx.scene.control.Label?>

<?import javafx.scene.image.Image?>

<?import javafx.scene.image.ImageView?>

<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.Pane?>

<?import javafx.scene.paint.LinearGradient?>

<?import javafx.scene.paint.Stop?>

<?import javafx.scene.shape.Rectangle?>

<?import javafx.scene.text.Font?>



<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

    <children>

          <Rectangle arcHeight="5.0" height="151.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">

             <fill>

                <LinearGradient endX="1.0" endY="0.5491606714628298" startX="0.36930455635491605" startY="0.8920863309352518">

                   <stops>

                      <Stop color="BLACK" />

                      <Stop color="#2f406b" offset="1.0" />

                   </stops>

                </LinearGradient>

             </fill>

          </Rectangle>

          <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0" layoutX="631.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">

             <image>

                <Image url="@../../resources/WordCrex_Logo.png" />

             </image>

          </ImageView>

          <Label fx:id="lblLogin" layoutX="655.0" layoutY="201.0" text="Login">

             <font>

                <Font name="System Bold" size="22.0" />

             </font>

          </Label>

          <Pane layoutX="502.0" layoutY="278.0" prefHeight="298.0" prefWidth="363.0">

             <children>

                <FontAwesomeIconView fx:id="icoUser" glyphName="USER" layoutX="28.0" layoutY="100.0" size="30" text="" />

                <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK" layoutX="29.0" layoutY="163.0" size="30" />

                <JFXTextField fx:id="txtUName" layoutX="70.0" layoutY="70.0" prefHeight="26.0" prefWidth="225.0" promptText="gebruikersnaam">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXTextField>

                <JFXPasswordField fx:id="txtPass" layoutX="69.0" layoutY="133.0" prefHeight="26.0" prefWidth="225.0" promptText="wachtwoord">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXPasswordField>

                <JFXButton fx:id="btnLogin" defaultButton="true" layoutX="94.0" layoutY="214.0" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXButton>

             </children>

          </Pane>

          <Label fx:id="lblWordCrex" layoutX="636.0" layoutY="119.0" text="WordCrex" textFill="WHITE">

             <font>

                <Font size="20.0" />

             </font>

          </Label>    

     </children> 

</AnchorPane>

This is how it looks default.

enter image description here

When I'm making the window bigger it looks like this.

enter image description here

And when I'm making the window smaller it looks like this.

enter image description here

I want to make this scene responsive, so that the banner on top goes the whole width of the window, the image (the throphy) centered and all of the 'login' controls centered in the page.

So if anyone could help me with figuring out how to make this scene responsive, I'd appreciate it a lot!

EDIT:

I now have this, but even here it won't resize with the window.

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.StackPane?>

<?import javafx.scene.shape.Rectangle?>





<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1">

   <children>

      <AnchorPane prefHeight="768.0" prefWidth="1366.0">

         <children>

            <Rectangle fill="#1d288a" height="150.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />

         </children>

      </AnchorPane>

   </children>

</StackPane>

edited Nov 14 '18 at 22:33

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

I have this code

<?xml version="1.0" encoding="UTF-8"?>



<?import com.jfoenix.controls.JFXButton?>

<?import com.jfoenix.controls.JFXPasswordField?>

<?import com.jfoenix.controls.JFXTextField?>

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>

<?import javafx.scene.control.Label?>

<?import javafx.scene.image.Image?>

<?import javafx.scene.image.ImageView?>

<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.Pane?>

<?import javafx.scene.paint.LinearGradient?>

<?import javafx.scene.paint.Stop?>

<?import javafx.scene.shape.Rectangle?>

<?import javafx.scene.text.Font?>



<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

    <children>

          <Rectangle arcHeight="5.0" height="151.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">

             <fill>

                <LinearGradient endX="1.0" endY="0.5491606714628298" startX="0.36930455635491605" startY="0.8920863309352518">

                   <stops>

                      <Stop color="BLACK" />

                      <Stop color="#2f406b" offset="1.0" />

                   </stops>

                </LinearGradient>

             </fill>

          </Rectangle>

          <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0" layoutX="631.0" layoutY="14.0" pickOnBounds="true" preserveRatio="true">

             <image>

                <Image url="@../../resources/WordCrex_Logo.png" />

             </image>

          </ImageView>

          <Label fx:id="lblLogin" layoutX="655.0" layoutY="201.0" text="Login">

             <font>

                <Font name="System Bold" size="22.0" />

             </font>

          </Label>

          <Pane layoutX="502.0" layoutY="278.0" prefHeight="298.0" prefWidth="363.0">

             <children>

                <FontAwesomeIconView fx:id="icoUser" glyphName="USER" layoutX="28.0" layoutY="100.0" size="30" text="" />

                <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK" layoutX="29.0" layoutY="163.0" size="30" />

                <JFXTextField fx:id="txtUName" layoutX="70.0" layoutY="70.0" prefHeight="26.0" prefWidth="225.0" promptText="gebruikersnaam">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXTextField>

                <JFXPasswordField fx:id="txtPass" layoutX="69.0" layoutY="133.0" prefHeight="26.0" prefWidth="225.0" promptText="wachtwoord">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXPasswordField>

                <JFXButton fx:id="btnLogin" defaultButton="true" layoutX="94.0" layoutY="214.0" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                   <font>

                      <Font size="16.0" />

                   </font>

                </JFXButton>

             </children>

          </Pane>

          <Label fx:id="lblWordCrex" layoutX="636.0" layoutY="119.0" text="WordCrex" textFill="WHITE">

             <font>

                <Font size="20.0" />

             </font>

          </Label>    

     </children> 

</AnchorPane>

This is how it looks default.

enter image description here

When I'm making the window bigger it looks like this.

enter image description here

And when I'm making the window smaller it looks like this.

enter image description here

I want to make this scene responsive, so that the banner on top goes the whole width of the window, the image (the throphy) centered and all of the 'login' controls centered in the page.

So if anyone could help me with figuring out how to make this scene responsive, I'd appreciate it a lot!

EDIT:

I now have this, but even here it won't resize with the window.

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.AnchorPane?>

<?import javafx.scene.layout.StackPane?>

<?import javafx.scene.shape.Rectangle?>





<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1">

   <children>

      <AnchorPane prefHeight="768.0" prefWidth="1366.0">

         <children>

            <Rectangle fill="#1d288a" height="150.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" width="1366.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />

         </children>

      </AnchorPane>

   </children>

</StackPane>

java javafx responsive scenebuilder

edited Nov 14 '18 at 22:33

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

edited Nov 14 '18 at 22:33

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

edited Nov 14 '18 at 22:33

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

asked Nov 14 '18 at 21:55

idontunderstandarrays

899

3

Try considering to layout using StackPane, HBox, VBox, GridPane etc by setting the layout policy. This will solve your responsive problem.

– Sai Dandem
Nov 14 '18 at 22:17

@SaiDandem Could you look at the edit I made?

– idontunderstandarrays
Nov 14 '18 at 22:34

Try removing the AnchorPane. Here you dont need an extra wrapper to your Rectangle.Just place the Rectangle as the children to the StackPane and remove all the AnchorPane stuff you defined in Rectangle. By default StackPane aligns its children to CENTER. You can change that by updating the alignment attribute. Also try considering @fabian answer.

– Sai Dandem
Nov 14 '18 at 22:51

add a comment |

3

Try considering to layout using StackPane, HBox, VBox, GridPane etc by setting the layout policy. This will solve your responsive problem.

– Sai Dandem
Nov 14 '18 at 22:17

@SaiDandem Could you look at the edit I made?

– idontunderstandarrays
Nov 14 '18 at 22:34

Try removing the AnchorPane. Here you dont need an extra wrapper to your Rectangle.Just place the Rectangle as the children to the StackPane and remove all the AnchorPane stuff you defined in Rectangle. By default StackPane aligns its children to CENTER. You can change that by updating the alignment attribute. Also try considering @fabian answer.

– Sai Dandem
Nov 14 '18 at 22:51

Try considering to layout using StackPane, HBox, VBox, GridPane etc by setting the layout policy. This will solve your responsive problem.

– Sai Dandem
Nov 14 '18 at 22:17

@SaiDandem Could you look at the edit I made?

– idontunderstandarrays
Nov 14 '18 at 22:34

Try removing the AnchorPane. Here you dont need an extra wrapper to your Rectangle.Just place the Rectangle as the children to the StackPane and remove all the AnchorPane stuff you defined in Rectangle. By default StackPane aligns its children to CENTER. You can change that by updating the alignment attribute. Also try considering @fabian answer.

– Sai Dandem
Nov 14 '18 at 22:51

add a comment |

1 Answer
1

active

oldest

votes

Rectangles are not resizable. You should use Region or a subtype instead and apply the gradient as background.

Furthermore AnchorPane is no good for centering nodes. If you just want to center the login controls horizontally only, I recommend wrapping everything in a VBox. Otherwise wrap those controls in a StackPane and this to the VBox

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

   <children>

      <StackPane prefHeight="151.0" style="-fx-background-color: linear-gradient(to right, black 0%, #2f406b 100%)">

         <children>

            <VBox maxHeight="-Infinity" maxWidth="-Infinity">

              <children>

                <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0"  pickOnBounds="true" preserveRatio="true">

                  <image>

                    <Image url="@../../resources/WordCrex_Logo.png" />

                  </image>

                </ImageView>

                <Label fx:id="lblWordCrex" text="WordCrex" textFill="WHITE">

                  <font>

                    <Font size="20.0" />

                  </font>

                </Label>

              </children>

            </VBox>

         </children>

      </StackPane>

      <StackPane VBox.vgrow="ALWAYS">

         <children>

            <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">

               <children>

                   <Label fx:id="lblLogin" text="Login">

                       <font>

                           <Font name="System Bold" size="22.0" />

                       </font>

                  </Label>

                  <GridPane>

                    <columnConstraints>

                      <ColumnConstraints hgrow="NEVER" />

                      <ColumnConstraints prefWidth="225.0" />

                    </columnConstraints>

                    <rowConstraints>

                      <RowConstraints vgrow="SOMETIMES" />

                      <RowConstraints vgrow="SOMETIMES" />

                    </rowConstraints>

                    <children>

                        <FontAwesomeIconView fx:id="icoUser" glyphName="USER" size="30" text="" />

                        <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK"  size="30" GridPane.rowIndex="1" />

                        <JFXTextField fx:id="txtUName" prefHeight="26.0" promptText="gebruikersnaam" GridPane.columnIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXTextField>

                        <JFXPasswordField fx:id="txtPass" prefHeight="26.0" promptText="wachtwoord" GridPane.columnIndex="1" GridPane.rowIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXPasswordField>

                    </children>

                  </GridPane>

                  <JFXButton fx:id="btnLogin" defaultButton="true" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                      <font>

                          <Font size="16.0" />

                      </font>

                  </JFXButton>

               </children>

            </VBox>

         </children>

      </StackPane>

   </children>

</VBox>

edited Nov 14 '18 at 22:53

answered Nov 14 '18 at 22:48

fabian

52.3k115272

Ah thank you! I'll try to experiment with this to find my ideal solution. But is it possible to set on the outer VBox a min width and height? I've done this in the properties, but I can still resize below that.

– idontunderstandarrays
Nov 14 '18 at 23:05

@idontunderstandarrays The scene root can be forced to resize below the minimum size. If you want to prevent this, you should do so using the properties of Stage.

– fabian
Nov 14 '18 at 23:07

Got it, but somehow I can still change the height a bit, which is weird because it's exactly the same. stage.setMinHeight(768); stage.setMinWidth(1366);

– idontunderstandarrays
Nov 14 '18 at 23:11

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53309308%2fcontrols-need-to-stay-centered-when-resizing-responsive-ui-javafx%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Rectangles are not resizable. You should use Region or a subtype instead and apply the gradient as background.

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

   <children>

      <StackPane prefHeight="151.0" style="-fx-background-color: linear-gradient(to right, black 0%, #2f406b 100%)">

         <children>

            <VBox maxHeight="-Infinity" maxWidth="-Infinity">

              <children>

                <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0"  pickOnBounds="true" preserveRatio="true">

                  <image>

                    <Image url="@../../resources/WordCrex_Logo.png" />

                  </image>

                </ImageView>

                <Label fx:id="lblWordCrex" text="WordCrex" textFill="WHITE">

                  <font>

                    <Font size="20.0" />

                  </font>

                </Label>

              </children>

            </VBox>

         </children>

      </StackPane>

      <StackPane VBox.vgrow="ALWAYS">

         <children>

            <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">

               <children>

                   <Label fx:id="lblLogin" text="Login">

                       <font>

                           <Font name="System Bold" size="22.0" />

                       </font>

                  </Label>

                  <GridPane>

                    <columnConstraints>

                      <ColumnConstraints hgrow="NEVER" />

                      <ColumnConstraints prefWidth="225.0" />

                    </columnConstraints>

                    <rowConstraints>

                      <RowConstraints vgrow="SOMETIMES" />

                      <RowConstraints vgrow="SOMETIMES" />

                    </rowConstraints>

                    <children>

                        <FontAwesomeIconView fx:id="icoUser" glyphName="USER" size="30" text="" />

                        <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK"  size="30" GridPane.rowIndex="1" />

                        <JFXTextField fx:id="txtUName" prefHeight="26.0" promptText="gebruikersnaam" GridPane.columnIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXTextField>

                        <JFXPasswordField fx:id="txtPass" prefHeight="26.0" promptText="wachtwoord" GridPane.columnIndex="1" GridPane.rowIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXPasswordField>

                    </children>

                  </GridPane>

                  <JFXButton fx:id="btnLogin" defaultButton="true" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                      <font>

                          <Font size="16.0" />

                      </font>

                  </JFXButton>

               </children>

            </VBox>

         </children>

      </StackPane>

   </children>

</VBox>

edited Nov 14 '18 at 22:53

answered Nov 14 '18 at 22:48

fabian

52.3k115272

Ah thank you! I'll try to experiment with this to find my ideal solution. But is it possible to set on the outer VBox a min width and height? I've done this in the properties, but I can still resize below that.

– idontunderstandarrays
Nov 14 '18 at 23:05

@idontunderstandarrays The scene root can be forced to resize below the minimum size. If you want to prevent this, you should do so using the properties of Stage.

– fabian
Nov 14 '18 at 23:07

Got it, but somehow I can still change the height a bit, which is weird because it's exactly the same. stage.setMinHeight(768); stage.setMinWidth(1366);

– idontunderstandarrays
Nov 14 '18 at 23:11

add a comment |

Rectangles are not resizable. You should use Region or a subtype instead and apply the gradient as background.

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

   <children>

      <StackPane prefHeight="151.0" style="-fx-background-color: linear-gradient(to right, black 0%, #2f406b 100%)">

         <children>

            <VBox maxHeight="-Infinity" maxWidth="-Infinity">

              <children>

                <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0"  pickOnBounds="true" preserveRatio="true">

                  <image>

                    <Image url="@../../resources/WordCrex_Logo.png" />

                  </image>

                </ImageView>

                <Label fx:id="lblWordCrex" text="WordCrex" textFill="WHITE">

                  <font>

                    <Font size="20.0" />

                  </font>

                </Label>

              </children>

            </VBox>

         </children>

      </StackPane>

      <StackPane VBox.vgrow="ALWAYS">

         <children>

            <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">

               <children>

                   <Label fx:id="lblLogin" text="Login">

                       <font>

                           <Font name="System Bold" size="22.0" />

                       </font>

                  </Label>

                  <GridPane>

                    <columnConstraints>

                      <ColumnConstraints hgrow="NEVER" />

                      <ColumnConstraints prefWidth="225.0" />

                    </columnConstraints>

                    <rowConstraints>

                      <RowConstraints vgrow="SOMETIMES" />

                      <RowConstraints vgrow="SOMETIMES" />

                    </rowConstraints>

                    <children>

                        <FontAwesomeIconView fx:id="icoUser" glyphName="USER" size="30" text="" />

                        <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK"  size="30" GridPane.rowIndex="1" />

                        <JFXTextField fx:id="txtUName" prefHeight="26.0" promptText="gebruikersnaam" GridPane.columnIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXTextField>

                        <JFXPasswordField fx:id="txtPass" prefHeight="26.0" promptText="wachtwoord" GridPane.columnIndex="1" GridPane.rowIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXPasswordField>

                    </children>

                  </GridPane>

                  <JFXButton fx:id="btnLogin" defaultButton="true" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                      <font>

                          <Font size="16.0" />

                      </font>

                  </JFXButton>

               </children>

            </VBox>

         </children>

      </StackPane>

   </children>

</VBox>

edited Nov 14 '18 at 22:53

answered Nov 14 '18 at 22:48

fabian

52.3k115272

Ah thank you! I'll try to experiment with this to find my ideal solution. But is it possible to set on the outer VBox a min width and height? I've done this in the properties, but I can still resize below that.

– idontunderstandarrays
Nov 14 '18 at 23:05

@idontunderstandarrays The scene root can be forced to resize below the minimum size. If you want to prevent this, you should do so using the properties of Stage.

– fabian
Nov 14 '18 at 23:07

Got it, but somehow I can still change the height a bit, which is weird because it's exactly the same. stage.setMinHeight(768); stage.setMinWidth(1366);

– idontunderstandarrays
Nov 14 '18 at 23:11

add a comment |

Rectangles are not resizable. You should use Region or a subtype instead and apply the gradient as background.

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

   <children>

      <StackPane prefHeight="151.0" style="-fx-background-color: linear-gradient(to right, black 0%, #2f406b 100%)">

         <children>

            <VBox maxHeight="-Infinity" maxWidth="-Infinity">

              <children>

                <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0"  pickOnBounds="true" preserveRatio="true">

                  <image>

                    <Image url="@../../resources/WordCrex_Logo.png" />

                  </image>

                </ImageView>

                <Label fx:id="lblWordCrex" text="WordCrex" textFill="WHITE">

                  <font>

                    <Font size="20.0" />

                  </font>

                </Label>

              </children>

            </VBox>

         </children>

      </StackPane>

      <StackPane VBox.vgrow="ALWAYS">

         <children>

            <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">

               <children>

                   <Label fx:id="lblLogin" text="Login">

                       <font>

                           <Font name="System Bold" size="22.0" />

                       </font>

                  </Label>

                  <GridPane>

                    <columnConstraints>

                      <ColumnConstraints hgrow="NEVER" />

                      <ColumnConstraints prefWidth="225.0" />

                    </columnConstraints>

                    <rowConstraints>

                      <RowConstraints vgrow="SOMETIMES" />

                      <RowConstraints vgrow="SOMETIMES" />

                    </rowConstraints>

                    <children>

                        <FontAwesomeIconView fx:id="icoUser" glyphName="USER" size="30" text="" />

                        <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK"  size="30" GridPane.rowIndex="1" />

                        <JFXTextField fx:id="txtUName" prefHeight="26.0" promptText="gebruikersnaam" GridPane.columnIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXTextField>

                        <JFXPasswordField fx:id="txtPass" prefHeight="26.0" promptText="wachtwoord" GridPane.columnIndex="1" GridPane.rowIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXPasswordField>

                    </children>

                  </GridPane>

                  <JFXButton fx:id="btnLogin" defaultButton="true" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                      <font>

                          <Font size="16.0" />

                      </font>

                  </JFXButton>

               </children>

            </VBox>

         </children>

      </StackPane>

   </children>

</VBox>

edited Nov 14 '18 at 22:53

answered Nov 14 '18 at 22:48

fabian

52.3k115272

Rectangles are not resizable. You should use Region or a subtype instead and apply the gradient as background.

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1366.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.LoginController">

   <children>

      <StackPane prefHeight="151.0" style="-fx-background-color: linear-gradient(to right, black 0%, #2f406b 100%)">

         <children>

            <VBox maxHeight="-Infinity" maxWidth="-Infinity">

              <children>

                <ImageView fx:id="ivWordCrex" fitHeight="115.0" fitWidth="105.0"  pickOnBounds="true" preserveRatio="true">

                  <image>

                    <Image url="@../../resources/WordCrex_Logo.png" />

                  </image>

                </ImageView>

                <Label fx:id="lblWordCrex" text="WordCrex" textFill="WHITE">

                  <font>

                    <Font size="20.0" />

                  </font>

                </Label>

              </children>

            </VBox>

         </children>

      </StackPane>

      <StackPane VBox.vgrow="ALWAYS">

         <children>

            <VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity">

               <children>

                   <Label fx:id="lblLogin" text="Login">

                       <font>

                           <Font name="System Bold" size="22.0" />

                       </font>

                  </Label>

                  <GridPane>

                    <columnConstraints>

                      <ColumnConstraints hgrow="NEVER" />

                      <ColumnConstraints prefWidth="225.0" />

                    </columnConstraints>

                    <rowConstraints>

                      <RowConstraints vgrow="SOMETIMES" />

                      <RowConstraints vgrow="SOMETIMES" />

                    </rowConstraints>

                    <children>

                        <FontAwesomeIconView fx:id="icoUser" glyphName="USER" size="30" text="" />

                        <FontAwesomeIconView fx:id="icoLock" glyphName="LOCK"  size="30" GridPane.rowIndex="1" />

                        <JFXTextField fx:id="txtUName" prefHeight="26.0" promptText="gebruikersnaam" GridPane.columnIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXTextField>

                        <JFXPasswordField fx:id="txtPass" prefHeight="26.0" promptText="wachtwoord" GridPane.columnIndex="1" GridPane.rowIndex="1">

                           <font>

                              <Font size="16.0" />

                           </font>

                        </JFXPasswordField>

                    </children>

                  </GridPane>

                  <JFXButton fx:id="btnLogin" defaultButton="true" onAction="#login" prefHeight="32.0" prefWidth="175.0" style="-fx-background-color: #384667;" text="Inloggen" textFill="WHITE">

                      <font>

                          <Font size="16.0" />

                      </font>

                  </JFXButton>

               </children>

            </VBox>

         </children>

      </StackPane>

   </children>

</VBox>

edited Nov 14 '18 at 22:53

answered Nov 14 '18 at 22:48

fabian

52.3k115272

edited Nov 14 '18 at 22:53

answered Nov 14 '18 at 22:48

fabian

52.3k115272

answered Nov 14 '18 at 22:48

fabian

52.3k115272

answered Nov 14 '18 at 22:48

fabian

52.3k115272

Ah thank you! I'll try to experiment with this to find my ideal solution. But is it possible to set on the outer VBox a min width and height? I've done this in the properties, but I can still resize below that.

– idontunderstandarrays
Nov 14 '18 at 23:05

@idontunderstandarrays The scene root can be forced to resize below the minimum size. If you want to prevent this, you should do so using the properties of Stage.

– fabian
Nov 14 '18 at 23:07

Got it, but somehow I can still change the height a bit, which is weird because it's exactly the same. stage.setMinHeight(768); stage.setMinWidth(1366);

– idontunderstandarrays
Nov 14 '18 at 23:11

add a comment |

Ah thank you! I'll try to experiment with this to find my ideal solution. But is it possible to set on the outer VBox a min width and height? I've done this in the properties, but I can still resize below that.

– idontunderstandarrays
Nov 14 '18 at 23:05

@idontunderstandarrays The scene root can be forced to resize below the minimum size. If you want to prevent this, you should do so using the properties of Stage.

– fabian
Nov 14 '18 at 23:07

Got it, but somehow I can still change the height a bit, which is weird because it's exactly the same. stage.setMinHeight(768); stage.setMinWidth(1366);

– idontunderstandarrays
Nov 14 '18 at 23:11

Ah thank you! I'll try to experiment with this to find my ideal solution. But is it possible to set on the outer VBox a min width and height? I've done this in the properties, but I can still resize below that.

– idontunderstandarrays
Nov 14 '18 at 23:05

@idontunderstandarrays The scene root can be forced to resize below the minimum size. If you want to prevent this, you should do so using the properties of Stage.

– fabian
Nov 14 '18 at 23:07

Got it, but somehow I can still change the height a bit, which is weird because it's exactly the same. stage.setMinHeight(768); stage.setMinWidth(1366);

– idontunderstandarrays
Nov 14 '18 at 23:11

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky