Hi I am trying to add Tiles into tilepane which is added into scroll pane my aim is to have three columns of cards perfectly fit horizontally I don`t want to scroll, but I am not able to figure out how to give perfect width to those cards.

package com.sam.ui.tableManagment;

import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.TilePane;

public class TableTileCardsContainer extends ScrollPane {

    ObservableList<String> tables;
    TilePane tilePane;
    TableTileCard tableTileCard;

    public TableTileCardsContainer() {
        tables = FXCollections.observableArrayList("1", "2", "3","1", "2", "3");

        tilePane = new TilePane();
        tilePane.setHgap(5);
        tilePane.setVgap(5);

        this.setFitToWidth(true);
        tilePane.setOrientation(Orientation.HORIZONTAL);

        for (String table : tables) {
            tableTileCard = new TableTileCard(table);
            tableTileCard.setPrefHeight(80);

            tableTileCard.prefWidthProperty().bind(
                    tilePane.widthProperty().subtract(tilePane.getHgap()*2).divide(3)
            );

            tilePane.getChildren().add(tableTileCard);
        }

        this.setContent(tilePane);
        this.getStylesheets().add("/css/ProductCardsContainer.css");

    }

 

This is how i am trying to add

tableTileCard.prefWidthProperty().bind(
                    tilePane.widthProperty().subtract(tilePane.getHgap()*2).divide(3)
            );

Hi I am trying to add Tiles into tilepane which is added into scroll pane my aim is to have three columns of cards perfectly fit horizontally I don`t want to scroll, but I am not able to figure out how to give perfect width to those cards.

package com.sam.ui.tableManagment;

import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.TilePane;

public class TableTileCardsContainer extends ScrollPane {

    ObservableList<String> tables;
    TilePane tilePane;
    TableTileCard tableTileCard;

    public TableTileCardsContainer() {
        tables = FXCollections.observableArrayList("1", "2", "3","1", "2", "3");

        tilePane = new TilePane();
        tilePane.setHgap(5);
        tilePane.setVgap(5);

        this.setFitToWidth(true);
        tilePane.setOrientation(Orientation.HORIZONTAL);

        for (String table : tables) {
            tableTileCard = new TableTileCard(table);
            tableTileCard.setPrefHeight(80);

            tableTileCard.prefWidthProperty().bind(
                    tilePane.widthProperty().subtract(tilePane.getHgap()*2).divide(3)
            );

            tilePane.getChildren().add(tableTileCard);
        }

        this.setContent(tilePane);
        this.getStylesheets().add("/css/ProductCardsContainer.css");

    }

 

This is how i am trying to add

tableTileCard.prefWidthProperty().bind(
                    tilePane.widthProperty().subtract(tilePane.getHgap()*2).divide(3)
            );

• java
• javafx
• tile
• scrollpane

• You should be able to do this just by calling tilePane.setPrefColumns(3) (and without the binding), though it depends on how TableTileCard is defined. Can you create a minimal reproducible example? – James_D Commented Mar 28 at 15:18
• If you want to fix the number of columns, though, a GridPane might work better than a TilePane. – James_D Commented Mar 28 at 15:32
• Yes but it will not work if I minimise the window I want to to dynamically shift to 2 or 1 column – Sam Commented Mar 28 at 15:44
• So the requirements are to prefer three columns, and have no more than three columns, and have the scroll pane not scroll horizontally but scroll vertically if necessary? – James_D Commented Mar 28 at 15:52

1 Answer 1

You can set the preferred number of columns for a tile pane, using setPrefColumns. This will determine the preferred width of the tile pane (basically compute it based on the preferred number of columns, accounting for the size of the tiles and the horizontal gap between them).

If you want to prevent the tile pane growing beyond its preferred width (and thereby determine a maximum number of columns), you can use

tilePane.setMaxWidth(Region.USE_PREF_SIZE);

I think the following gives the effect you are looking for. I included a split pane to show some resizing behavior.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Region;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) {
        TilePane tilePane = new TilePane();
        tilePane.setPrefColumns(3);
        tilePane.setHgap(5);
        tilePane.setVgap(5);
        tilePane.setMaxWidth(Region.USE_PREF_SIZE);

        ScrollPane scrollPane = new ScrollPane(tilePane);
        scrollPane.setFitToWidth(true);

        for (int i = 0 ; i < 6; i++) {
            tilePane.getChildren().add(createTile());
        }

        SplitPane splitPane = new SplitPane(scrollPane, new Pane());
        Scene scene = new Scene(splitPane, 1000, 500);
        stage.setScene(scene);
        stage.show();
    }

    private Region createTile() {
        Pane pane = new Pane();
        pane.setStyle("""
        -fx-background-color: lightblue, white;
        -fx-background-insets: 0, 0 0 40 0;
        -fx-min-height:200;
        -fx-min-width:200;
        """);
        return pane;
    }

    public static void main(String[] args) {
        launch();
    }
}

Here are some screen shots with various sizes and vertical scrolling: