JavaFx - increase space between text and tab header area edge

Question

I can't understand what element I should work to do this task. I tried

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

EDIT 1
This is what I get enter image description here

But I have the same tab header inside big red rectangle. How can I increase distance between text and edge of the tab header area? By other words - how can I make tab header bigger 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: enter image description here

But I need (sorry, it's gimp,not photoshop) enter image description here

Can you post an image of what it looks like, and (if possible) what you would like it to look like? — James_D, Jun 07 '15 at 04:59

aw-think · Accepted Answer · 2015-06-07T08:35:36.363

If you want a border around the tab (not the label), you have to 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;
}

enter image description here

If you want to manipulate the tab-container (where the label is in) itself you need this:

.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;
}

enter image description here

UPDATE

Default for a selected tab is that:

.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 it how it goes:

.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;  
}

enter image description here

Look at the modena.css (default JavaFX stylesheet) file for info on things to change.

Font size will not change dynamic, you have to take care of font size with a listener on size/width/height property of the tab (in relation to font size).

And there are a lot of pseudo tags like .tab:selected .tab:top etc. So be aware of this kind of things if you want the default behavior only with new design.

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

I can't understand you code. In both codes there is a black border.Threre mustn't be any custom borders. — , Jun 07 '15 at 08:27
Could you take a look at this http://stackoverflow.com/questions/30690918/javafx-tab-rounded-corners — , Jun 07 '15 at 08:37

James_D · Answer 2 · 2015-06-07T06:09:45.423

1

It's not really 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 the css file

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

edited Jun 07 '15 at 06:09

answered Jun 07 '15 at 05:55

James_D

201,275
16
291
322

But when tab is focused how can I make border be not in center but on the edge of tab header? I mean borders to behave the same way, only for big tab header? – Jun 07 '15 at 05:58
I mean the main part must be not in center but it's wide must be ~wide of tab header. Text left, close button right. – Jun 07 '15 at 06:00
Thank you for your help. See edit 2. I'm sorry, that I didn't draw it from the beginning. The main point how to increase the distance between border and text, but not the distance between border and the edge of the tab header. – Jun 07 '15 at 06:30

JavaFx - increase space between text and tab header area edge

2 Answers2

Linked