How to hide TabBar in TabPane?

Question

I am trying to create Next / Previous windows using TabPane . I decided to use TabPane , as it is easy to use and design in SceneBuilder . At the beginning of the application, I used this to hide the TabBar for now -

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

TabPane appears after that -

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

Answer 1

Using TabPane with hidden tabs as an interface like a wizard is an interesting idea that I have not thought about and think I like.

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

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

Here is the SSCCE. In this, I gave the CSS wizard class tab.

 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-panel-a-wizard.css:

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

Answer 2

An easy way to do this is to change the color to synchronize it with the 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 }