CODEWITHSUNDEEP
javacssgluon-mobilejavafx-11
Joseph Sekwa
Joseph Sekwa

Reputation: 3

How to change font size of navigation drawer items title in gluon mobile javafx with css?

I am developing a simple mobile application with gluon mobile javafx, unfortunately I have came accross to a problem of styling navigation drawer items' title with css. If anyone knows how to do that, he or she may help me. Thanks.

Upvotes: -2

Views: 140

Answers (1)

José Pereda
José Pereda

Reputation: 45476

To style any JavaFX node with CSS, you mainly need to know its CSS style class, and the ones from its ancestors.

One way to know this is by printing out the hierarchy involved in the NavigationDrawer, like:

    @Override
    public void init() {
        AppViewManager.registerViewsAndDrawer();
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        appManager.start(primaryStage);

        appManager.getDrawer().getStyleClass()
                .forEach(css -> System.out.println("drawer css = " + css));
        appManager.getDrawer().getItems()
                .forEach(item -> item.getStyleClass()
                        .forEach(css -> System.out.println("  - item css = " + css)));
    }

that will print:

drawer css = navigation-drawer
  - item css = item
  - item css = item
  - item css = item

So now, for instance, you could add this to your style.css file:

.navigation-drawer .item .label {
    -fx-font-size: 18px;
    -fx-text-fill: red;
}

and that will give you:

While the font color is changed, the font size isn't. This is because there is a more restrictive rule that comes from Gluon Mobile stylesheets that takes precedence.

This means that you need to find out the full chain of ancestors. For this, it comes in handy Scenic View.

You can download it for your OS from here. It requires that JavaFX Swing dependency is added to your project (at least while testing).

Then launch Scenic View, and start your project, you should be able to see the tree of nodes showing up.

scenic view

If you check one by one the ancestors of the label, you can come up with this:

.navigation-drawer > BorderPane > .scroll-pane > .viewport .container > .item > .item-content > .text-box > .label {
    -fx-font-size: 18px;
    -fx-text-fill: red;
}

that will give you:

Upvotes: 2

Related Questions