Photoshop Question posted in
The official user guide can be found here.

JavaFx – increase space between text and tab header area edge – Photoshop

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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 ;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search