javajavafxjavafx-css

JavaFX TabPane remove border between Tabs and content

I want to remove the tiny border between the Tabs in a TabPane and their content. This border is part of the headers-region, and I've put its background in green in the images below. My application (code below) looks like this:

enter image description here

with the tabs having a tiny green border separating them from their content:

enter image description here

However, I would like the border between the tabs and their content to be removed, so that the tabs look like they're connected to their content. I would like it to look like the following (which I created by editing the image above):

enter image description here

Here is the Java code for my application:

package pack;

import javafx.application.Application;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class TabPaneTesting extends Application {
    
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        StackPane tab1Content = new StackPane(new Circle(100));
        Tab tab1 = new Tab("Tab 1", tab1Content);
        TabPane tabPane = new TabPane(tab1, new Tab("Tab 2"));
        tabPane.getStyleClass().add("tabtester");
        tabPane.setSide(Side.LEFT);
        
        Scene scene = new Scene(new StackPane(tabPane), 600, 400);
        scene.getStylesheets().add(TabPaneTesting.class.getResource("/pack/tabstyle.css").toExternalForm());
        
        stage.setScene(scene);
        stage.show();
    }
    
}

and here is the CSS (tabstyle.css):

.tabtester .tab-content-area {
    -fx-background-color: lightblue;
}

.tabtester .tab {
    -fx-background-color: lightblue;
}

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

.tabtester .tab-header-background {
    -fx-background-color: red;  
}

.tabtester .headers-region {
    -fx-background-color: green;
    -fx-padding: 0;
    -fx-border-color: transparent;
    -fx-border-width: 0;
}

As you can see in the CSS, I have tried removing any border and padding from the headers-region, but that does not appear to work.

Any ideas? Thanks in advance.

Solution

  • You can remove the space with this css statement:

    .tabtester > .tab-header-area > .headers-region > .tab {
    -fx-background-insets: 0 1 0 0, 1 2 1 1, 2 3 1 2;
}

    If you want to remove the space for the selected tab only (so that the user can distinguish between selected and not selected tabs):

    .tabtester > .tab-header-area > .headers-region > .tab:selected {
    -fx-background-insets: 0 1 0 0, 1 2 0 1, 2 3 0 2;
}

    The modena.css with the original values can be found e. g. here: https://gist.github.com/maxd/63691840fc372f22f470