user interface - JavaFX CSS: How to set tabpane tabs - width, height

Question

I am trying to make tabs that have a minimum width and height, for finger-size on a touch screen, and not the size of the text within.

.tab-pane *.tab-header-area *.tab-header-background {
  -fx-background-color:transparent;
  -fx-tab-min-width:120px;
  -fx-tab-max-width:120px;
  -fx-tab-min-height:50px;
  -fx-tab-max-height:50px;
}

.tab {
  -fx-font-family: Arial;
  -fx-font-size: 18;
  -fx-background-color:royalblue ;
}

.tab:selected {
    -fx-background-color:blue ;
}

The colors and font are working, but the sizes have no effect. I have tried a number of sizes, using px and em, but no effect.

    TabPane tabPane = new TabPane();

    Tab tab1 = new Tab();
    tab1.setText("Machine");
    tab1.setClosable(false);

    Tab tab2 = new Tab();
    tab2.setText("Shifts");
    tab2.setClosable(false);

    tabPane.getTabs().addAll(tab1, tab2);

Answer 1

The size properties you are trying to set are properties of the TabPane.

The selector you use:

.tab-pane *.tab-header-area *.tab-header-background

selects the tab header background child of the tab header area child of the tab pane: that is a StackPane (see the "Substructure" section of the docs linked above). StackPane doesn't define those properties, so in your CSS they have no effect.

Set the size properties directly on the tab pane:

.tab-pane *.tab-header-area *.tab-header-background {
  -fx-background-color:transparent;
}

.tab-pane {
  -fx-tab-min-width:120px;
  -fx-tab-max-width:120px;
  -fx-tab-min-height:50px;
  -fx-tab-max-height:50px;
}

.tab {
  -fx-font-family: Arial;
  -fx-font-size: 18;
  -fx-background-color:royalblue ;
}

.tab:selected {
    -fx-background-color:blue ;
}