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..

    IE8 Not showing divs with floats

    How to load Different css everytime onload

    How to use JS/Jquery to replaces repeated CSS styles - Nested List

    How to use css value for javascript in IF-THEN construction? [closed]

    How To select a specific Div from its Class with JS

    How do I use CSS and JS files within a HTML file being sent with Express?

    How to center two columns using CSS without using a fixed width container?

    How to display the the full content of a database on clicking on 'Read More' button

    How can I make this Asp.net button have the same CSS as this

    How to exclude an HTML element form Ionic CSS

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    How can I position my navigation bar further up on the page?

    how to make the navbar fixed to top

    CSS - how to put a opacity border to an input?

    How to center data table header and data using in bootstrap w/o using CSS?

    How to move last li to right most side CSS

    How to avoid CSS selector applying to more than one level of descendants

    How do I keep an element scaled in CSS3 in-till mouseleave? Then on mouseleave scale the element back to it's original size

    How to inherit CSS using Less?

    How can I make the BODY element take up 100% height of the HTML element?

    How to select the las Li with Xpath or Css Selector

    How To Set Height of Child Div According To Parent Div

    How to use Javascript in a innerHTML inline css scenario?

    How to make elliptical inner shadow with CSS?

    jQuery UI sortable: how to leave css values of changed items untouched?

    How to vertically align middle some header text between 2 header images on a website?

    How do I left pad a div in a JavaFX WebView?

    How to rotate and fade background images in and out with javascript/ASP.NET/CSS

    How can I get images floated to the left of other definition list elements?

    How to add ellipsis to table cells with dynamic width with only CSS?