Change Tab's Size of TabPane in JavaFX

Question

Can we change the tab's size of TabPane in JavaFX? I am using SceneBuilder but it seems it doesn't offer any customozation of the tab's size

Currently I have something like this

.

What I want is basically the tabs to fill the parent and when it is clicked it will show the other forms like this (I made it with button as only the rough image)

Is it possible to do something like this? Any help is appreciated. Thanks

Related: http://stackoverflow.com/questions/31051756/javafx-tab-fit-full-size-of-header. You could check the answer here. — DVarga, Jun 16 '16 at 11:02
@DVarga I understand the basic concept but not sure how to implement it. Do I need to declare this in the presenter, instead of public @ FXML TabPane a , i will declare it like public @ FXML StretchedTabPane a? I did declare it like the latter but nothing changes. — Ihsan Haikal, Jun 16 '16 at 12:50
You have several options: 1) Create a new SctrechedPane in the initialize method of your controller, from your FXML file inject the `Parent` (e.g. VBox, AnchorPane or anything you want) then add the newly created `StrechedPane` to that Parent. In this case you don't need a `TabPane` in your FXML file. 2) You copy the method from the `StrechedPane` class and you add it directly in your controller (and tailor it to use the injected simple `TabPane`) 3) You can also add the ScrechtedPane into your FXML file: http://stackoverflow.com/questions/22895186/using-custom-controls-in-fxml — DVarga, Jun 16 '16 at 14:28
@DVarga I tried to do the option 3 but it gives me an error, as for option 1 and 2 I dont know how to do that as I am still very new to JavaFx. Could you give me an example code how to implement this class? Thanks — Ihsan Haikal, Jun 20 '16 at 09:57

score 7 · Accepted Answer · answered Aug 31 '17 at 22:16

As far as I know the width and height of elements are read-only. You can set -fx-pref-width, -fx-pref-height, -fx-max-width, -fx-min-width, -fx-max-height, -fx-min-height ,-fx-border-width and -fx-border-height to adjust the size of Java FX elements.

You can do what you want by using Css:

.tab {

    -fx-pref-width: 250
} 
.tab-header-background {
    -fx-background-color:transparent
}

.tab-pane{
    -fx-padding: 0 -1 -1 -1
}

score 4 · Answer 2 · edited Mar 03 '20 at 12:21

4

We can set minimum/maximum width/height for all Tabs on TabPane.

@FXML
TabPane tabPane;

and somewhere:

tabPane.setTabMinWidth(33);
tabPane.setTabMinHeight(33);
tabPane.setTabMaxWidth(69);
tabPane.setTabMaxHeight(69);

edited Mar 03 '20 at 12:21

Miss Chanandler Bong

4,081
10
26
36

answered Apr 05 '18 at 16:46

Ihorko.bk

41
2

score 0 · Answer 3 · answered Jul 12 '20 at 19:27

You can acheieve this with property binding:

val binding = tabPaneParent.widthProperty().doubleBinding(tabPane.tabs) {
    it as Double / tabPane.tabs.size // - 30
}

tabPane.tabMinWidthProperty().bind(binding)
tabPane.tabMaxWidthProperty().bind(binding)

tabPaneParent is the Node in which tabPane lives, doubleBinding is TornadoFX's equivlant of Bindings#createDoubleBinding.

This will react to the user resizing your window, as well as, the tabs count increasing/decreasing.

Change Tab's Size of TabPane in JavaFX

3 Answers3