CODEWITHSUNDEEP
javafx-2
joeComponent
joeComponent

Reputation: 186

JavaFX: Formatting a TabPane with Vertical Tabs and Horizontal Tab Labels

I'm attempting to format a TabPane, where the Tabs are vertical on the left-side of the TabPane. The tab text needs to be horizontal. The problem occurs when the text is rotated to the horizontal position. It appears that the tab is auto-sized for vertical text; THEN, it becomes horizontal without resizing the tab. The result is varying heights of tabs (depending on the length of the text label BEFORE rotating). I've tried 3 different solutions that I've found in other questions, but none work. Is there a working solution? (Java 1.8u144)

----- Attempt #1 - CSS and Text Attribute -----

CSS

.tab .tab-label {
    -fx-rotate: 90;  /*PROBLEM: it sizes height using vertical text before rotating, messes up H. */
}

FXML

<TabPane side="LEFT" rotateGraphic="true" >
    <tabs>
        <Tab fx:id="tab1" closable="false" text="Select">
            <Label text="Select"/>
        </Tab>
        <Tab fx:id="tab2" closable="false" text="Log">
            <Label text="Log"/>
        </Tab>
        <Tab fx:id="tab3" closable="false" text="Schedules">
            <Label text="Schedules"/>
        </Tab>
    </tabs>
</TabPane>

----- Attempt #2 - Java replace tab-label with Graphic -----

CSS

.tab .tab-label {
    -fx-rotate: 90;  /*PROBLEM: it sizes height using vertical text before rotating, messes up H. */
}

Java Controller

@FXML private Tab tab1;
@FXML private Tab tab2;
@FXML private Tab tab3;

@Override
public void initialize(URL url, ResourceBundle rb) {
    tab1.setGraphic(new Label("Select"));
    tab2.setGraphic(new Label("Log"));
    tab3.setGraphic(new Label("Schedules"));
}


FXML

<TabPane side="LEFT" rotateGraphic="true" >
    <tabs>
        <Tab fx:id="tab1" closable="false" >
            <Label text="Select" />
        </Tab>
        <Tab fx:id="tab2" closable="false">
            <Label text="Log" />
        </Tab>
        <Tab fx:id="tab3" closable="false">
            <Label text="Schedules" />
        </Tab>
    </tabs>
</TabPane>

----- Attempt #3 - FXML replace tab-label with Graphic -----

FXML

<TabPane side="LEFT" rotateGraphic="true" >
    <tabs>
        <Tab fx:id="tab1" closable="false" >
            <graphic>
                <Group >
                    <Label text="Select" rotate="90"/>
                </Group>
            </graphic>
            <Label text="Select" />
        </Tab>
        ...

Upvotes: 2

Views: 2547

Answers (1)

joeComponent
joeComponent

Reputation: 186

I'll answer my own question since I found a solution, and to provide an example. Using the FXML approach from the question...

<TabPane side="LEFT" rotateGraphic="true" >
<tabs>
    <Tab fx:id="tab1" closable="false" >
        <graphic>
            <Group >
                <Label text="Select" rotate="90"/>
            </Group>
        </graphic>
        <Label text="Select" />
    </Tab>
    ...

The additional step needed for the solution was to add CSS ....

.tab-pane .tab-header-area .tab {
-fx-pref-height: 150;
-fx-pref-width: 50;}

...which re-sizes the tab label to fit with the 90 degree tab rotate.

Upvotes: 3

Related Questions