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 add decoration to link in CSS?

    JavaFX 8 - How to change the color of the prompt text of a NOT editable combobox via CSS?

    Simple slideshow not working properly

    How to edit CSS style of a div using C# in .NET

    How do I make a hover over only take up a portion of an image as seen on gamlinwhiskeyhouse.com? [closed]

    How to make cross-browser compatibility with IE10 and IE11?

    How do I evenly space radio buttons

    How to make a jsp page keyboard accessible and how to change the position of a popped up jsp page?

    How to make a css media query snippet in ATOM editor

    How to determine CSS attribute is set on the element?

    How can I toggle a div to reveal content with CSS

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    how to make dynamically loaded image with different width and height responsive in css

    How to stretch background image of a table cell with CSS?

    How to crop Google GeoChart and center its content?

    How to stop the navigation bar after scrolling?

    How to use Knockout.js to change a CSS class on mouseover?

    How to remove hover effect for some of the cells in angularjs

    How to make CSS URL background images show up in localhost?

    How to change angularJS's default css styles? Search box etc

    How to make iframe use all height available to it

    How to make a foreground image using CSS?

    How to change css property of the particular selection text in a input field using javascript

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    how to center submenu under the parent `
  • `
  • How to ignore white spaces in between tags, CSS, PHP

    How can I use css properties with different classes?

    How to make div stack first vertically then horizontally? [duplicate]

    how to create an anchor point