Center tabs in a tabpane using CSS
I'm trying to center tabs in JavaFX TabPane
, but can't seem to achieve the desired result.
Using the CSS link, I can target different parts of the control's substructure TabPane
, but no matter what I try, I cannot center the tabs horizontally within the header.
The CSS I have so far is below:
.tab-pane > .tab-header-area > .headers-region {
-fx-border-color: red;
-fx-border-width: 3;
-fx-alignment: CENTER;
}
.tab-pane > .tab-header-area > .tab-header-background {
-fx-border-color: blue;
-fx-border-width: 3;
}
Which gives the following output:
As you can see, the colored borders indicate that I am selecting the substructure correctly TabPane
, but the property -fx-alignment
seems to have no effect.
Is it possible to center tabs horizontally within the header using CSS, and if so, which property do I need to set and which part of the substructure do I need for targeting?
source to share
Well, this is not a neat solution, but rather a workaround. Since the tabpane substructure is made up of stacked glasses, these stacked stacks are centered by default. But the tabs are not centered, which implies a custom shim is created in the skin code. The correct solution can be found after reading the skin sping code.
Platform.runLater(new Runnable() {
@Override
public void run() {
final StackPane region = (StackPane) tabPane.lookup(".headers-region");
final StackPane regionTop = (StackPane) tabPane.lookup(".tab-pane:top *.tab-header-area");
regionTop.widthProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> arg0, Number arg1, Number arg2) {
Insets in = regionTop.getPadding();
regionTop.setPadding(new Insets(
in.getTop(),
in.getRight(),
in.getBottom(),
arg2.doubleValue() / 2 - region.getWidth() / 2));
}
});
// force re-layout so the tabs aligned to center at initial state
stage.setWidth(stage.getWidth() + 1);
}
});
source to share