Discussion :

[Heavy Metal Hero]

Bonjour,

J'ai fait une tab pane qui a cette apparence:


Comme vous voyez, il y a un blanc sur la droite, c'est l'espace réservé à un bouton flèche qui apparaît lorsque la largeur du tabpane est trop petit pour contenir tous ses tabs.

J'aimerais remplir toute la largeur de la tabpane, sans ce blanc.

Voici mon code:
HelloApplication.java:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package com.example.demo;
 
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
 
import java.io.IOException;
 
public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch();
    }
}

HelloController.java:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.example.demo;
 
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TabPane;
import javafx.scene.layout.BorderPane;
 
import java.net.URL;
import java.util.ResourceBundle;
 
public class HelloController implements Initializable {
 
    private static final int GAP = 19;
 
    @FXML
    private TabPane tabPane = null;
 
    @FXML
    private BorderPane borderPane = null;
 
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        // Permits to change the width of the tabs to fit all the space.
        tabPane.tabMinWidthProperty()
               .bind(tabPane.widthProperty()
                            .divide(tabPane.getTabs()
                                           .size())
                            .subtract(GAP));
    }
}

hello-view.css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.tab-header-area {
    -fx-padding: 0 0 0 0;
}
 
.tab-header-background {
    -fx-background-color: transparent;
}
 
.tab-down-button {
    -fx-padding: -7;
}
 
.tab-down-button .arrow {
    -fx-padding: -7;
}
 
.tab {
    -fx-background-color: transparent;
    -fx-border-width: 0 0 0 0;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}
 
.tab-label {
    -fx-font-size: 13px;
    -fx-font-weight: bold;
}
 
.tab:hover {
    -fx-background-color: cyan;
    -fx-border-color: black;
    -fx-border-width: 0 0 2 0;
}
 
.tab:pressed {
    -fx-background-color: gray;
    -fx-border-color: black;
    -fx-border-width: 0 0 2 0;
}
 
.tab:selected {
    -fx-background-color: blue;
    -fx-border-color: black;
    -fx-border-width: 0 0 2 0;
}

hello-view.fxml:

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import java.net.URL?>
<TabPane fx:id="tabPane" side="BOTTOM" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo.HelloController">
    <tabs>
        <Tab fx:id="trackTab" text="Tracks">
            <content>
                <BorderPane fx:id="borderPane"/>
            </content>
        </Tab>
        <Tab text="Volumes">
            <content>
                <AnchorPane minHeight="0.0" minWidth="0.0" />
            </content>
        </Tab>
    </tabs>
    <stylesheets>
        <URL value="@hello-view.css" />
    </stylesheets>
</TabPane>

Dans le controller, j'utilise un binding pour que les tabs prennent la largeur de la tabpane. Dans le CSS, j'essaye de masquer le bouton flèche et son espace. D'ailleurs j'aimerais aussi me déparasser de ma constante GAP.

Avez-vous une solution ?

Merci de votre aide.