JavaFX: Formatage d'un onglet avec des onglets verticaux et des étiquettes de tabulation horizontales

Question

Je tente de formater un onglet, où les onglets sont verticaux sur le côté gauche du TabPane. Le texte de l'onglet doit être horizontal. Le problème se produit lorsque le texte est pivoté en position horizontale. Il semble que l'onglet est automatiquement dimensionné pour le texte vertical; ALORS, il devient horizontal sans redimensionner l'onglet. Le résultat est la variation de la hauteur des onglets (en fonction de la longueur de l'étiquette de texte AVANT de tourner). J'ai essayé 3 solutions différentes que j'ai trouvées dans d'autres questions, mais aucune ne fonctionne. Y a-t-il une solution de travail? (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> 
     ... 

Answer 1

Je vais répondre à ma propre question depuis que j'ai trouvé une solution, et de fournir un exemple. En utilisant l'approche FXML de la 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> 
    ... 

L'étape supplémentaire nécessaire pour la solution était d'ajouter CSS ....

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

... qui redimensionne l'étiquette de l'onglet pour s'adapter à la rotation de l'onglet de 90 degrés.