CSS styling on MenuItem Focused Label JavaFX


Question

I'm having some issues getting something to work. So I have a custom context menu validation-error-context and a corresponding css for this:

#validation-error-context
{
    -fx-background-color: #ffbbbb;  
    -fx-border-color: #f00; 
}

Inside this context I also want to style the MenuItems so I apply the following css to them:

#error-menu-item
{
    -fx-background-color: #ffbbbb;  
}

.error-menu-item:focused
{
    -fx-background-color: #ffbbbb;
    -fx-text-fill: red;
}

That all works as planned and the items and the context have the red background and border. Now the problem is when I want to set the text fill color on the focused state of the MenuItem, which would traditionally be done through:

.menu-item:focused .label 
{
  -fx-text-fill: red;
}

However that would obviously apply that style to all menuItems in the project, which is not what I want and using the statement below doesn't work for the instance I'm using.

.error-menu-item:focused .label 
{
    -fx-text-fill: red;
}

Is there any way to set the text fill property of the focused label, either through the css or code? Im not even sure if its possible but any pointers in the right direction will be very much appreciated.

1
1
7/7/2014 2:53:05 PM

Accepted Answer

Your code will work, as long as you set the errors as css Classes instead of ids: (#)

Look at minimal compilable example with your code:

MenuController.java

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
public class MenuController implements Initializable {
    @FXML private MenuButton OkMenu;
    @FXML private MenuItem foo1;
    @FXML private MenuItem bar2;
    @Override
    public void initialize(URL arg0, ResourceBundle arg1) {
        //Define foo1 and bar 2 as errors:
        foo1.getStyleClass().add("error-menu-item");
        bar2.getStyleClass().add("error-menu-item");
    }
}

Main.java <- just load the css and the FXML

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("menu.fxml"));
        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
        stage.setScene(scene);
        stage.setTitle("Menu");
        stage.show();

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

style.css

.error-menu-item
{
    -fx-background-color: #ffbbbb;  
}

.error-menu-item:focused .label
{
    -fx-text-fill: red;
}

menu.fxml

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

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

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="MenuController">
<children><MenuButton layoutX="0.37109375" layoutY="7.5" mnemonicParsing="false" text="FooMenu">
  <items>
    <MenuItem fx:id="foo1" mnemonicParsing="false" text="Foo1" />
    <MenuItem fx:id="foo2" mnemonicParsing="false" text="Foo2" /><MenuItem fx:id="foo3" mnemonicParsing="false" text="Foo3" />
  </items>
</MenuButton><MenuButton layoutX="99.7421875" layoutY="7.5" mnemonicParsing="false" text="BarMenu">
  <items>
    <MenuItem fx:id="bar1" mnemonicParsing="false" text="Bar1" />
    <MenuItem fx:id="bar2" mnemonicParsing="false" text="Bar2" /><MenuItem fx:id="bar3" mnemonicParsing="false" text="Bar3" />
  </items>
</MenuButton>
</children>

You can download this code on Gist.

2
7/7/2014 6:06:12 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon