JavaFx - increasing the space between the text and the edge of the tab header area

Question

I cannot figure out which element I should use to complete this task. I tried

.tab-header-area .tab{ -fx-background-color:red; -fx-padding:30px; } 

EDIT 1
This is what I get

But I have the same tab title inside a big red rectangle. How to increase the distance between the text and the edge of the tab header area? In other words - how can I make the tab title larger with the same font size?

EDIT 2
When i do

 .tab-header-area .tab .label{ -fx-padding:5px 30px 5px 0; } .tab-header-area .tab { -fx-background-color: red ; } 

I get:

But I need (sorry, this is gimp, not photoshop)

Answer 1

If you need a border around the tab (not a label), you should use this:

 .tab-pane > .tab-header-area > .headers-region > .tab { -fx-background-color: red; -fx-padding: 20px; -fx-border-color: black; -fx-border-width: 1px; } 

If you want to manipulate the tab container (where the label is), you need the following:

 .tab-pane > .tab-header-area > .headers-region > .tab > .tab-container{ -fx-border-color: black; -fx-border-width: 1px; } .tab-pane > .tab-header-area > .headers-region > .tab { -fx-padding: 20px; -fx-background-color: red; } 

UPDATE

The default value for the selected tab is as follows:

 .tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator { -fx-border-width: 1, 1; -fx-border-color: -fx-focus-color, -fx-faint-focus-color; -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3; -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */ } 

And this is what it looks like:

 .tab-pane > .tab-header-area > .headers-region > .tab { -fx-padding: 20px; -fx-background-color: red; } .tab-pane > .tab-header-area > .headers-region > .tab:selected { -fx-padding: 20px; -fx-background-color: red; -fx-border-width: 1px; -fx-border-color: black; } .tab-pane > .tab-header-area > .headers-region >.tab:selected .focus-indicator{ -fx-border-width: 0px; } 

See the modena.css file (the default JavaFX stylesheet) for information on the things you need to change.

The font size will not change dynamically, you should take care of the font size with the listener by the size / width / height of the tab property (relative to the font size).

And there are many pseudo tags like .tab: selected.tab: top etc. Be aware of this if you want the default behavior with just a new design.

And finally, look at the css selectors, you missed the downstream selectors ('>'): http://www.w3schools.com/cssref/sel_element_gt.asp

Answer 2

It’s not clear what you are looking for ... maybe

 import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.Tab; import javafx.scene.control.TabPane; import javafx.stage.Stage; public class TabPaneStyleTest extends Application { @Override public void start(Stage primaryStage) { TabPane tabPane = new TabPane(); Tab tab1 = new Tab(); tab1.setGraphic(new Label("tab 1")); Tab tab2 = new Tab(); tab2.setGraphic(new Label("tab 2")); tabPane.getTabs().addAll(tab1, tab2); Scene scene = new Scene(tabPane); scene.getStylesheets().add("tab-pane-big-tabs.css"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } } 

with css file

 .tab-header-area .tab .label{ -fx-padding:5px 30px 5px 0; } .tab-header-area .tab { -fx-background-color: red ; }