I have ScrollPane and i want a scrollable view if the content is bigger than my viewport height. I have tilePane inside it for tile-ish layout. There i only have 2 Vboxes for now, which is not wrapping when i decrease viewport width.

Here's my fxml file

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

<?import javafx.geometry.Insets?> <?import javafx.scene.control.Label?> <?import javafx.scene.control.ScrollPane?> <?import javafx.scene.image.Image?> <?import javafx.scene.image.ImageView?> <?import javafx.scene.layout.HBox?> <?import javafx.scene.layout.TilePane?> <?import javafx.scene.layout.VBox?>


<ScrollPane prefHeight="733.0" prefWidth="1033.0" stylesheets="@../stylesheets/activities.css" xmlns=".0.1" xmlns:fx="; fx:controller="fxmlFolder.Activities">    <content>
      <TilePane hgap="100.0" prefColumns="2" prefHeight="779.0" prefWidth="1009.0" stylesheets="@../stylesheets/activities.css" vgap="50.0">
         <children>
            <VBox prefHeight="354.0" prefWidth="398.0" styleClass="activityVBox">
               <children>
                  <ImageView fitHeight="249.0" fitWidth="408.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../activitiesImg/yoga1.jpg" />
                     </image>
                  </ImageView>
                  <Label styleClass="activityTitle" text="Yoga" />
                  <HBox minHeight="-Infinity" prefHeight="1.0" prefWidth="200.0" style="-fx-background-color: white;" />
                  <VBox styleClass="activityDescriptionVBox">
                     <children>
                        <Label styleClass="activityDescription" text="Relax and rejuvenate with guided yoga sessions." />
                        <Label styleClass="activityDescription" text="Timing: 6:00 AM – 8:00 AM" />
                        <Label styleClass="activityDescription" text="Price: $15 per session" />
                     </children>
                  </VBox>
               </children>
            </VBox>
            <VBox layoutX="40.0" layoutY="30.0" prefHeight="354.0" prefWidth="398.0" styleClass="activityVBox">
               <children>
                  <ImageView fitHeight="249.0" fitWidth="408.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../activitiesImg/yoga1.jpg" />
                     </image>
                  </ImageView>
                  <Label styleClass="activityTitle" text="Yoga" />
                  <HBox minHeight="-Infinity" prefHeight="1.0" prefWidth="200.0" style="-fx-background-color: white;" />
                  <VBox styleClass="activityDescriptionVBox">
                     <children>
                        <Label styleClass="activityDescription" text="Relax and rejuvenate with guided yoga sessions." />
                        <Label styleClass="activityDescription" text="Timing: 6:00 AM – 8:00 AM" />
                        <Label styleClass="activityDescription" text="Price: $15 per session" />
                     </children>
                  </VBox>
               </children>
            </VBox>
         </children>
         <padding>
            <Insets bottom="20.0" left="30.0" top="20.0" />
         </padding>
      </TilePane>    </content> </ScrollPane>

I have ScrollPane and i want a scrollable view if the content is bigger than my viewport height. I have tilePane inside it for tile-ish layout. There i only have 2 Vboxes for now, which is not wrapping when i decrease viewport width.

Here's my fxml file

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

<?import javafx.geometry.Insets?> <?import javafx.scene.control.Label?> <?import javafx.scene.control.ScrollPane?> <?import javafx.scene.image.Image?> <?import javafx.scene.image.ImageView?> <?import javafx.scene.layout.HBox?> <?import javafx.scene.layout.TilePane?> <?import javafx.scene.layout.VBox?>


<ScrollPane prefHeight="733.0" prefWidth="1033.0" stylesheets="@../stylesheets/activities.css" xmlns="http://javafx/javafx/23.0.1" xmlns:fx="http://javafx/fxml/1" fx:controller="fxmlFolder.Activities">    <content>
      <TilePane hgap="100.0" prefColumns="2" prefHeight="779.0" prefWidth="1009.0" stylesheets="@../stylesheets/activities.css" vgap="50.0">
         <children>
            <VBox prefHeight="354.0" prefWidth="398.0" styleClass="activityVBox">
               <children>
                  <ImageView fitHeight="249.0" fitWidth="408.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../activitiesImg/yoga1.jpg" />
                     </image>
                  </ImageView>
                  <Label styleClass="activityTitle" text="Yoga" />
                  <HBox minHeight="-Infinity" prefHeight="1.0" prefWidth="200.0" style="-fx-background-color: white;" />
                  <VBox styleClass="activityDescriptionVBox">
                     <children>
                        <Label styleClass="activityDescription" text="Relax and rejuvenate with guided yoga sessions." />
                        <Label styleClass="activityDescription" text="Timing: 6:00 AM – 8:00 AM" />
                        <Label styleClass="activityDescription" text="Price: $15 per session" />
                     </children>
                  </VBox>
               </children>
            </VBox>
            <VBox layoutX="40.0" layoutY="30.0" prefHeight="354.0" prefWidth="398.0" styleClass="activityVBox">
               <children>
                  <ImageView fitHeight="249.0" fitWidth="408.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../activitiesImg/yoga1.jpg" />
                     </image>
                  </ImageView>
                  <Label styleClass="activityTitle" text="Yoga" />
                  <HBox minHeight="-Infinity" prefHeight="1.0" prefWidth="200.0" style="-fx-background-color: white;" />
                  <VBox styleClass="activityDescriptionVBox">
                     <children>
                        <Label styleClass="activityDescription" text="Relax and rejuvenate with guided yoga sessions." />
                        <Label styleClass="activityDescription" text="Timing: 6:00 AM – 8:00 AM" />
                        <Label styleClass="activityDescription" text="Price: $15 per session" />
                     </children>
                  </VBox>
               </children>
            </VBox>
         </children>
         <padding>
            <Insets bottom="20.0" left="30.0" top="20.0" />
         </padding>
      </TilePane>    </content> </ScrollPane>

• javafx
• scenebuilder

• 1 What happens if you remove the ScrollPane? – SedJ601 Commented Feb 14 at 16:33
• 1 @SedJ601 that helped the VBoxes wrap but not my page is not scrollable when the content's height is more than my window's height – Corvus-OS Commented Feb 15 at 1:06
• @Slaw Oh so it was creating horizontal scroll. Thanks for your answer. And can you please upvote the post incase someone might run into similar issue – Corvus-OS Commented Feb 16 at 5:21

1 Answer 1

If I understand correctly, you want the scroll pane's content to fit its width and not grow larger. You want the content to be scrollable vertically but not horizontally. In which case you should set the ScrollPane.fitToWidth property to true.

If true and if the contained node is a Resizable, then the node will be kept resized to match the width of the ScrollPane's viewport. If the contained node is not a Resizable, this value is ignored.

In FXML, that would look like (omitting everything else):

<ScrollPane fitToWidth="true">
  <!-- content -->
</ScrollPane>

Though note the scroll pane will, at least with the default skin, still respect the min/max width of its content even with fitToWidth true.