[FIXED] Position pagination Javafx css

Issue

How can i move the pagination to the bottom right while the content of the pagination stays centered

<Pagination fx:id="paging" maxPageIndicatorCount="5" pageCount="0" prefHeight="1010.0" prefWidth="1150.0" StackPane.alignment="CENTER_RIGHT">

Solution

Page controls and page info right aligned

You can use this CSS to align the pagination controls to the right.

.pagination {
    -fx-page-information-alignment: right;
}
.pagination > .pagination-control > .control-box {
    -fx-alignment: bottom-right;
    -fx-padding: 0.416em 1.1em 0 0;
}

The right padding of 1.1em on the control box is to allow room for the right aligned page information (the thing that says "x/N" where x is the current page and N is the max pages).

Page controls right aligned with no page info

If you don't want page information at all then you can make the right alignment 0em instead of 1.1em (or just define no padding as the default right padding is 0), and set -fx-page-information-visible: false instead of setting -fx-page-information-alignment.

.pagination {
    -fx-page-information-visible: false;
}
.pagination > .pagination-control > .control-box {
    -fx-alignment: bottom-right;
}

Centering page content

To have the content of each page centered, place each page in a StackPane as in the example.

How to learn how to write this yourself

Info on styling Pagination is available in:

• CSS reference guide Pagination section.
• modena.css file found in your JavaFX installation, for example:
  • javafx-controls-17.0.0.1-mac.jar -> com/sun/javafx/scene/control/skin/modena/modena.css.

Example App

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Pagination;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class PageAlign extends Application {
    private static final String CUSTOM_PAGINATION_CSS = """
            data:text/css,
            .pagination {
                -fx-background-color: lemonchiffon;
                -fx-page-information-alignment: right;
            }
            .pagination > .pagination-control > .control-box {
                -fx-alignment: bottom-right;
                -fx-padding: 0.416em 1.1em 0 0;
            }
            """;

    @Override
    public void start(Stage stage) {
        final Pagination pagination = new Pagination();
        pagination.getStylesheets().add(CUSTOM_PAGINATION_CSS);
        pagination.setPageFactory(this::generatePage);
        pagination.setMaxPageIndicatorCount(6);
        pagination.setPageCount(6);
        pagination.setPrefSize(250, 140);
        stage.setScene(new Scene(pagination));
        stage.show();
    }

    private StackPane generatePage(Integer idx) {
        StackPane page = new StackPane(
                new Label("Page Content " + (idx + 1))
        );
        page.setStyle("-fx-background-color: lightblue;");

        return page;
    }

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

Answered By - jewelsea
Answer Checked By - Marie Seifert (JavaFixing Admin)