Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
like image 599
Mark Meyers Avatar asked Jun 06 '16 00:06

Mark Meyers


1 Answers

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 ;
}
like image 120
James_D Avatar answered Oct 06 '22 07:10

James_D