CODEWITHSUNDEEP
javafxtabsjavafx-8fxml
cgo
cgo

Reputation: 43

How to add space left of the first Tab in a javafx TabPane?

I have a JavaFX application where I need to move the first tab in a tabpane slightly to the right so I can add a button later in the created gap. I managed somehow to do that by adding a style "-fx-translate-x: 20px;" to each tab in the tabpane but the result is not what I expect as the last tab only shows partially. Below is a small fxml sample that reproduce the problem, is there something wrong in what I am doing or is there another way to achieve that? Thanks for your help

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40" fx:controller="FXMLDocumentController">
   <children>
      <TabPane prefHeight="200.0" prefWidth="320.0" tabClosingPolicy="UNAVAILABLE">
        <tabs>
          <Tab style="-fx-translate-x: 20px;" text="Tab 1">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </Tab>
          <Tab style="-fx-translate-x: 20px;" text="Tab 2">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </Tab>
        </tabs>
      </TabPane>
   </children>
</AnchorPane>

Upvotes: 3

Views: 3507

Answers (1)

Shane C
Shane C

Reputation: 111

You can apply a css file to the scene to gain access to the substructure of the tabpane. The following will indent all tabs to the right by 50 (via setting the left padding to 50px).

cssFile.css:

.tab-pane .tab-header-area {
    -fx-padding: 0 0 0 50;
}

In the project:

scene.getStylesheets().add("mypackage/cssFile.css");

Upvotes: 3

Related Questions