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:
As you can see, only part of the title is displayed. At the same time in modena the title is fully displayed:
How to make a long title (with unknown width in advance) display fully in AtlantFX? Of course, a CSS-based solution would be preferable.
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.