JavaFX 2.0 TabPane : Tabs at left and keep tab header horizontal

Question

I'm trying to develop a GUI for a web application and I wanted to set a TabPane with tabs placed at left keeping the tab headers horizontal. I already found how to place the tabs at left, but after many searches I didn't succeed to set the headers in the right alignment. They still vertical and difficult to read.

How could I fixed that?

Accentual

Answer 1

There is an open feature request for this: RT-19547 New API to rotate text on tabpane tabs

The feature request is currently open, but not scheduled for implementation. You can vote for or comment on the feature request and link back to this StackOverflow post to register your interest in the feature.

To implement this yourself, you will need to create a new TabPane skin or patch the existing TabPane skin, which is likely not trivial.

Xeres

Answer 2

You can use CSS to customize the tabs and tab labels:

.tab *.tab-label {
    -fx-rotate: 90;
}

.tab {
    -fx-padding: 3em 0.5em 3em 0.5em;
}

Penstock

Answer 3

Add this method in you code and pass your tabPane to it:

void setTabPaneLeftTabsHorizontal(TabPane tabPane){

    tabPane.setSide(Side.LEFT);
    tabPane.setRotateGraphic(true);        

    Label l = null;
    StackPane stp = null;
    for(Tab t : tabPane.getTabs()){
        l = new Label(t.getText());
        l.setRotate(90);
        stp = new StackPane(new Group(l));
        stp.setRotate(90);
        t.setGraphic(stp);
        t.setText("");
    }
    
    tabPane.setTabMinHeight(100);
    tabPane.setTabMaxHeight(100);
}

Vahe

Answer 4

You may use the following method to create the tab header

private StackPane createTabHeader(String text, Node graphics){
        return new StackPane(new Group(new Label(text, graphics)));
}

Then call it in your code like the following:

Tab tab = new Tab();
tab.setGraphic(createTabHeader("TEXT", new ImageView("IMAGE_PATH")));

Note that you need to set the width and height of the tabs as they will not scale automatically.

TabPane tabPane = new TabPane(tab);
tabPane.setSide(Side.LEFT);
tabPane.setTabMinWidth(50);
tabPane.setTabMaxWidth(50);
tabPane.setTabMinHeight(200);
tabPane.setTabMaxHeight(200);

Walleyed

Answer 5

// Firstly
tabPane.setSide(Side.LEFT);
tabPane.setRotateGraphic(true);        

Label l = new Label("Titel Tab1");
l.setRotate(90);
StackPane stp = new StackPane(new Group(l));
stp.setRotate(90);
tab1.setGraphic(stp);

l = new Label("Titel Tab2");
l.setRotate(90);
stp = new StackPane(new Group(l));
stp.setRotate(90);
tab2.setGraphic(stp);

tabPane.setTabMinHeight(100);
tabPane.setTabMaxHeight(100);

Paredes

Answer 6

Oh i remember i faced this before, simply add a StackPane,VBox o Hbox inside the tabHeader and all the components you may need, they will not follow tab Orientation.

Kweisui

Answer 7

have another solution, set the min width and height on css, and add a graphics element on fxml

-fx-tab-min-width:30;    
-fx-tab-max-width:30;    
-fx-tab-min-height:150;    
-fx-tab-max-height:150;

 <Tab closable="false">
           <graphic>
              <Pane prefHeight="76.0" prefWidth="30.0">
                 <children>
                    <Label layoutX="-35.0" layoutY="23.0" prefHeight="30.0" prefWidth="130.0" text="User">
                       <font>
                          <Font name="SansSerif Regular" size="14.0" />
                       </font></Label>
                 </children>
              </Pane>
           </graphic>
        </Tab>

Taintless