How do you set JavaFX TabPane CSS in code?


Tags: javafx,javafx-css

Problem :

http://stackoverflow.com/a/10615258/529411

I would like to add a background color to my tabpane dynamically (depending on certain conditions). How can I achieve this from code? One option is to assign he tab a specific ID which has the associated CSS, but in my case the color can be dynamically chosen by the user.

Also, I'm curious how to apply the styles in code when dealing with a hierarchy of components.



Solution :

You can assign the background color to be a looked-up color in the CSS file:

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-text-box-border, my-tab-header-background ;
}

Now in code you can set the value of the looked-up color whenever you need to:

tabPane.setStyle("my-tab-header-background: blue ;");

SSCCE:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;

public class DynamicTabHeaderBackground extends Application {

    private static final String TAB_HEADER_BACKGROUND_KEY = "my-tab-header-background" ;

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": blue ;");
        tabPane.getTabs().addAll(new Tab("Tab 1"), new Tab("Tab 2"));
        tabPane.getSelectionModel().selectedIndexProperty().addListener((obs, oldIndex, newIndex) -> {
            if (newIndex.intValue() == 0) {
                tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": blue ;");
            } else {
                tabPane.setStyle(TAB_HEADER_BACKGROUND_KEY+": green ;");
            }
        });

        Scene scene = new Scene(tabPane, 400, 400);
        scene.getStylesheets().add("dynamic-tab-header.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

with dynamic-tab-header.css containing the CSS code above.

Update

If you have multiple tab panes, you might want to consider the following variant of the CSS file:

.tab-pane {
    my-tab-header-background: derive(-fx-text-box-border, 30%) ;
}

.tab-pane > .tab-header-area > .tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-text-box-border, 
        linear-gradient(from 0px 0px to 0px 5px, -fx-text-box-border, my-tab-header-background) ;
}

This basically emulates the default behavior, but allows you to modify the background on any particular tab pane by calling the tabPane.setStyle(...) code as before.


    CSS Howto..

    How to ignore parent css style

    How to make a jQuery script and CSS responsive?

    How to hide show image link on top of another image link

    Normalize.css how to use it?

    How can I write CSS that only applies to specific browsers?

    Before CSS, how one would change margins and paddings?

    How to use CSS transition effects

    How can i create a hexagon shape with an image inside? [duplicate]

    how to minify css file containing @page

    How can I add shading to edges of the default ASP.NET page?

    How to debug HTML5/CSS for background video in RoR app

    how to add a css class to a list when the particular li is clicked using jquery?

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    CSS how to revert SVG animation on mouseout from current frame

    How to get CSS styling to shown on page? [closed]

    How to create a HTML and CSS “Try it yourself” Editor [closed]

    How to keep Div rotated with css after flip?

    How to create a dynamically sized form background with CSS?

    How to change color of element when hovering over another element?

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to override some CSS class settings

    How to wrap text around image?

    How to add padding to the outside of an input in css

    How to define separate fonts for each font-style - CSS

    CSS: How to address specific tags

    HTML table-cell how to set width

    How are CSS frameworks used?

    How to refer to an anchor pane in css?

    AngularJS how to put both ng-class and CSS class

    How to convert Xpath to CSS