How to hide the TabBar in TabPane?

Question

I am trying to build a Next/Previous windows using TabPane. I decided to use TabPane as it is easy to use and design in SceneBuilder. At the start fo the app, I used this to hide the TabBar for now-

tabPane.setTabMinHeight(-10);
tabPane.setTabMaxHeight(-10);

The appearance of the TabPane after this-

As you can see, there still remains a small part of TabBar (below the titlebar). How can I hide it completely so that my TabPane will look like just a normal Pane but with all its functionality intact?

score 11 · Accepted Answer · answered Nov 01 '15 at 02:00

Using a TabPane with hidden tabs as a wizard-type interface is an interesting idea, which I hadn't thought of and think I like.

You can hide the tabs with the following in an external CSS file:

.tab-pane {
    -fx-tab-max-height: 0 ;
} 
.tab-pane .tab-header-area {
    visibility: hidden ;
}

Here's a SSCCE. In this I gave the tab pane the CSS class wizard.

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class TabPaneAsWizard extends Application {

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        tabPane.getStyleClass().add("wizard");
        for (int i = 1; i<=10; i++) {
            tabPane.getTabs().add(createTab(i));
        }
        Button previous = new Button("Previous");
        previous.setOnAction(e -> 
            tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()-1));
        previous.disableProperty().bind(tabPane.getSelectionModel().selectedIndexProperty().lessThanOrEqualTo(0));
        Button next = new Button("Next");
        next.setOnAction(e ->
            tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()+1));
        next.disableProperty().bind(
                tabPane.getSelectionModel().selectedIndexProperty().greaterThanOrEqualTo(
                        Bindings.size(tabPane.getTabs()).subtract(1)));

        HBox buttons = new HBox(20, previous, next);
        buttons.setAlignment(Pos.CENTER);

        BorderPane root = new BorderPane(tabPane, null, null, buttons, null);
        Scene scene = new Scene(root, 600, 600);
        scene.getStylesheets().add("tab-pane-as-wizard.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Tab createTab(int id) {
        Tab tab = new Tab();
        Label label = new Label("This is step "+id);
        tab.setContent(label);
        return tab ;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

tab-pane-as-wizard.css:

.wizard {
    -fx-tab-max-height: 0 ;
} 
.wizard .tab-header-area {
    visibility: hidden ;
}

It solved my problem. Thanks a lot! Now I can design each page separately in GUI designer. — Dipu, Nov 01 '15 at 07:34
If you have multiple tabs opened, does this work for you ? In my case, for only one tab opened it works, but when I open another one the small bar appears as OP mentionned it in its example. — Jacks, May 25 '16 at 07:42

Shersha Fn · Answer 2 · 2016-06-04T16:24:56.707

1

The easy way of doing this is changing the colour to synchronize it with background

.tab-pane {
    -fx-tab-max-height: 0;

} 

.tab-pane .tab-header-area .tab-header-background {
    -fx-background-color: #843487;//your background colour code

}
.tab-pane .tab
{
    -fx-background-color: #843487;//your background colour code

}

edited Jun 04 '16 at 16:24

answered May 31 '16 at 13:41

Shersha Fn

1,511
3
26
34

score 1 · Answer 3 · answered Mar 12 '19 at 14:24

1

Just a little correction to your answers :

.tab-pane {
    -fx-tab-max-height: 0 ;
} 
.tab-pane .tab-header-area {
    visibility: hidden ;
    -fx-padding: -20 0 0 0;
}

answered Mar 12 '19 at 14:24

ucMedia

4,105
4
38
46

How to hide the TabBar in TabPane?

3 Answers3

Linked