javajavafxjavafx-css

How to show long title in floating tabs fully in AtlantaFX?


I use AtlantaFX, a modern JavaFX CSS theme collection with additional controls.

I have a problem with long titles in floating tabs. This is my code:

public class NewMain1 extends Application {

    @Override
    public void start(Stage primaryStage) {
        Application.setUserAgentStylesheet(new CupertinoDark().getUserAgentStylesheet());
        TabPane tabPane = new TabPane();
        tabPane.getStyleClass().addAll("mytab-pane", TabPane.STYLE_CLASS_FLOATING);

        Tab tab1 = new Tab("Short Title");

        var button = new Button("Test");
        button.setOnAction(e -> tab1.setText("Looooooooooooooooooooooong title"));
        var tabContent = new VBox(button);
        tab1.setContent(tabContent);

        tabPane.getTabs().add(tab1);
        Scene scene = new Scene(tabPane, 400, 150);
        scene.getStylesheets().add(getClass().getResource("test.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

and CSS:

.mytab-pane > .tab-header-area > .headers-region > .tab {
    -fx-min-width: -1;
}

And this is the result:

enter image description here

As you can see, only part of the title is displayed. At the same time in modena the title is fully displayed:

enter image description here

How to make a long title (with unknown width in advance) display fully in AtlantFX? Of course, a CSS-based solution would be preferable.


Solution

  • Looks like AtlantaFX is controlling this by setting the preferred width of the tab's label. Note it's the label that's being configured, not the tab itself. The width being used is 150 pixels. You can override this in your own CSS like so:

    .tab-pane.floating .tab-label {
      -fx-pref-width: -1;
    }
    

    Where -1 is the value of Region.USE_COMPUTED_SIZE. Using this solution means the tabs will no longer all be of uniform width. It also causes the tab to shrink to fit the label instead of leaving space. One way to somewhat fix that is to add:

    .tab-pane.floating {
      -fx-tab-min-width: 150px;
    }
    

    Except that causes the text of the tab to be center-aligned instead of left-aligned. Which may be why AtlantaFX sets the label's -fx-pref-width instead of the tab pane's -fx-tab-min-width and/or -fx-tab-max-width in the first place. Unfortunately, setting the label's -fx-min-width does not help because the default skin of TabPane ignores the label's min and max widths when laying out the tab. And the alignment of the label within the tab's area is hard-coded.

    You may want to consider not changing the preferred width of the label, and instead set the tooltip of the tab to be the tab's text. That would allow the user to see the full text when hovering the mouse over the tab. As noted in the question comments, this seems to be the modern approach to tabs, especially in browsers.