Search code examples
buttonjavafxtabswidthpane

JavaFX TabPane width and Button width don´t match

While I was trying to use the TabPane container in JavaFX I noticed, that if I give the Tabs in the TabPane a specific width and another element e.g. a Button the exact same width, they show up on the screen with different sizes.

Here is an example: As you can see in this image, the Button is smaller than the width of the tap

Here is the Code I for this specific image:

package stackOverflow;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TabPane.TabClosingPolicy;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TabPaneMystery extends Application {

public static void main(String[] args){

    launch(args);

}

@Override
public void start(Stage stage) throws Exception {

    StackPane stackPane = new StackPane();
    Scene scene = new Scene(stackPane, 600, 400);

    stage.setScene(scene);
    stage.show();

    TabPane tabPane = new TabPane();
    stackPane.getChildren().add(tabPane);
    Tab tab1 = new Tab();

    tabPane.setTabMaxWidth(160);        //The width of the tab is '160'
    tabPane.setTabMinWidth(160);
    tabPane.setTabClosingPolicy(TabClosingPolicy.UNAVAILABLE);

    tab1.setText("Tab");
    tabPane.getTabs().add(tab1);

    Button b = new Button();
    b.setText("Button");
    b.setPrefWidth(160);                //The width of the button is '160'
    b.setTranslateX(6);

    tab1.setContent(b);

}

}

in Line 33 and 34 (where the first comment is) I set the width of the tapPane to be 160 and in Line 42 (where the second comment is) I set the exact same width This results in the shown image.

My question is:
Have I made an obvious mistake or is it some kind of bug or does the compiler interpret the width for every node somewhat different?

Solution

  • I suspect you're seeing some padding in the Tab. The actual width of the Tab comes out to 170. You can confirm this by changing the width of the Tab to 150; it will then be the exact same size as the Button:

    screenshot1

    You could also use CSS to remove the padding:

    tab1.setStyle("-fx-padding: 0");

    Although, as you can see below, it isn't an exact match and there may be other CSS properties to look into. Hope this gets you closer to your goal, though:

    screenshot2