0

I want to achieve the results like the blow image where the scroll bar always stays close to the go button.

This is what I am trying to achieve

but when I resize it, the scroll pane doesn't respect its constraints e.g.

This is what happens

Here's my FXML code:

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ResultsUI">
   <children>
      <AnchorPane prefHeight="434.0" prefWidth="600.0" style="-fx-background-color: white;">
         <children>
            <TextField id="queryOldTF" fx:id="queryOldTF" layoutX="14.0" layoutY="14.0" prefHeight="40.0" prefWidth="518.0" style="-fx-min-height: 40; -fx-border-radius: 50%; -fx-border-color: #007BFF; -fx-background-color: white;" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="68.0" AnchorPane.topAnchor="14.0" />
            <Button id="serachAgainBtn" fx:id="serachAgainBtn" layoutX="532.0" layoutY="14.0" mnemonicParsing="false" onAction="#searchAgain" style="-fx-background-color: #007BFF; -fx-min-height: 40; -fx-min-width: 40; -fx-text-fill: white; -fx-border-radius: 50%; -fx-background-radius: 50%;" text="GO" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="14.0" />
         </children>
      </AnchorPane>
      <AnchorPane prefHeight="700.0" prefWidth="600.0" style="-fx-background-color: white;">
         <children>
            <ScrollPane id="scrollPane" fx:id="scrollPane" fitToWidth="true" layoutX="1.0" prefHeight="339.0" prefWidth="574.0" style="-fx-background-color: white;" vbarPolicy="ALWAYS" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="0.0">
              <content>
                  <Pane style="-fx-background-color: white;">
                     <children>
                        <AnchorPane layoutX="10.0" layoutY="14.0" style="-fx-background-color: white;">
                           <children>
                              <Label id="descTl" layoutY="44.0" prefHeight="83.0" prefWidth="556.0" text="Description" AnchorPane.bottomAnchor="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="40.0" />
                              <Label id="nameTl" prefHeight="27.0" prefWidth="557.0" style="-fx-font-size: 18;" text="Name" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="1.0" />
                              <Label id="authorTl" layoutX="4.0" layoutY="27.0" prefHeight="17.0" prefWidth="413.0" text="Authors" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" />
                              <Button id="openBtn" layoutX="6.0" layoutY="135.0" mnemonicParsing="false" style="-fx-background-color: white; -fx-border-color: #007BFF; -fx-border-radius: 25%;" text="Open" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="505.40000000000003" />
                           </children>
                        </AnchorPane>
                     </children>
                  </Pane>
              </content>
               <padding>
                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
               </padding>
            </ScrollPane>
         </children>
      </AnchorPane>
   </children>
</VBox>

I been trying for hours to fix it but dunno where I am missing, Any help would be appriciated.

HQuser
  • 640
  • 10
  • 26
  • 1
    If you want a dynamically sized UI then I suggest you use one of the other available [layouts](https://openjfx.io/javadoc/11/javafx.graphics/javafx/scene/layout/package-summary.html) rather than `AnchorPane`; one that will position and size its children in more "sophisticated" ways. For instance, instead of using an `AnchorPane` for your search field and "GO" button you can use an `HBox`. And I don't know your intention regarding the `ScrollPane`'s content, but a `GridPane` might suit your needs better. Also, manually setting the `layoutX` or `layoutY` properties is a design smell. – Slaw Jan 14 '19 at 22:34

1 Answers1

1

Try the following:

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ResultsUI">
   <children>
      <AnchorPane prefWidth="600.0" style="-fx-background-color: white;" VBox.vgrow="NEVER">
         <children>
            <TextField id="queryOldTF" fx:id="queryOldTF" layoutX="14.0" layoutY="14.0" prefHeight="40.0" prefWidth="518.0" style="-fx-min-height: 40; -fx-border-radius: 50%; -fx-border-color: #007BFF; -fx-background-color: white;" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="68.0" AnchorPane.topAnchor="14.0" />
            <Button id="serachAgainBtn" fx:id="serachAgainBtn" layoutX="532.0" layoutY="14.0" mnemonicParsing="false" onAction="#searchAgain" style="-fx-background-color: #007BFF; -fx-min-height: 40; -fx-min-width: 40; -fx-text-fill: white; -fx-border-radius: 50%; -fx-background-radius: 50%;" text="GO" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="14.0" />
         </children>
         <VBox.margin>
            <Insets />
         </VBox.margin>
      </AnchorPane>
      <AnchorPane prefHeight="700.0" prefWidth="600.0" style="-fx-background-color: white;" VBox.vgrow="ALWAYS">
         <children>
            <ScrollPane id="scrollPane" fx:id="scrollPane" fitToWidth="true" layoutX="1.0" prefHeight="339.0" prefWidth="574.0" style="-fx-background-color: white;" vbarPolicy="ALWAYS" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="0.0">
              <content>
                  <Pane style="-fx-background-color: white;">
                     <children>
                        <AnchorPane layoutX="10.0" layoutY="14.0" style="-fx-background-color: white;">
                           <children>
                              <Label id="descTl" layoutY="44.0" prefHeight="83.0" prefWidth="556.0" text="Description" AnchorPane.bottomAnchor="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="40.0" />
                              <Label id="nameTl" prefHeight="27.0" prefWidth="557.0" style="-fx-font-size: 18;" text="Name" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="1.0" />
                              <Label id="authorTl" layoutX="4.0" layoutY="27.0" prefHeight="17.0" prefWidth="413.0" text="Authors" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" />
                              <Button id="openBtn" layoutX="6.0" layoutY="135.0" mnemonicParsing="false" style="-fx-background-color: white; -fx-border-color: #007BFF; -fx-border-radius: 25%;" text="Open" AnchorPane.bottomAnchor="1.0" AnchorPane.rightAnchor="505.40000000000003" />
                           </children>
                        </AnchorPane>
                     </children>
                  </Pane>
              </content>
               <padding>
                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
               </padding>
            </ScrollPane>
         </children>
      </AnchorPane>
   </children>
</VBox>

I added VBox.vgrow="NEVER" to the top anchor pane and VBox.vgrow="ALWAYS" to the bottom one. I also removed the pref height of the top anchor pane and fixed the text field at 14px from the bottom so you have a nice little margin.

SystemGlitch
  • 2,150
  • 12
  • 27
  • One thing its confusing me is why is there a gray box area on bottom while there's no element there? how can I remove it? – HQuser Jan 15 '19 at 10:25