3

I started to style one of my applications and I noticed something weird. This is an example that reflects that behavior. As you may notice, there is a menu with three items. I styled context menu (orange), but it appears that context menu is in some other wider container that holds it. What is that container and how it can be styled to get natural looking menu.

enter image description here

Here is a code too:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;


public class TestMenu extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        BorderPane borderPane = new BorderPane();
        MenuBar menuBar = new MenuBar();
        Menu menu = new Menu("File");
        MenuItem menuItemSettings = new MenuItem("Settings");
        MenuItem menuItemOpen = new MenuItem("Open");
        MenuItem menuItemFile = new MenuItem("Exit");

        TextField textField = new TextField();
        textField.setPrefColumnCount(25);

        menuBar.getMenus().addAll(menu);
        menu.getItems().addAll(menuItemSettings, menuItemOpen, menuItemFile);
        borderPane.setTop(menuBar);
        borderPane.setCenter(textField);
        Scene scene = new Scene(borderPane, 320, 200);
        scene.getStylesheets().addAll("/testcss/style.css");
        stage.setScene(scene);
        stage.show();
    }

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

And stylesheet:

.root {
    -fx-background-color: #222;
}

.text {
    -fx-fill: white;
}

.menu-bar {
    -fx-background-color: #007fa8;
}

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

.menu-item:hover {
    -fx-background-color: #3399B9;
}

.menu-item:pressed {
    -fx-background-color: #004C65;
}

.context-menu {
    -fx-background-color: orange;
}

Thanks in advance.

Branislav Lazic
  • 14,388
  • 8
  • 60
  • 85
  • Your issue might be similar to this one regarding [Tooltip backgrounds](http://stackoverflow.com/questions/25336796/tooltip-background-with-javafx-css) (I'm not sure). You might also want to use [ScenicView](http://fxexperience.com/scenic-view/) to analyze the node hierarchy. – jewelsea Aug 21 '14 at 21:39
  • Or use the current [JavaFX Scene Builder](http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html). You can find a CSS tool in _View_ > _Show CSS Analyzer_. In the upper part you can navigate through the stylable elements and copy the CSS selector. Furthermore you can see, what style attributes are set by the default style and by your CSS file. – Vertex Aug 21 '14 at 21:50
  • @jewelsea Yes! It was a "tooltip background" issue! I did what Thomas Mikula suggested in his answer and it worked. Many thanks. – Branislav Lazic Aug 21 '14 at 22:30

1 Answers1

3

As you can read here:

a PopupWindow does have its own Scene. Scene's root gets the .root style-class by default

and

the root scene of a PopupWindow to have distinct styles via the CSS rule .root.popup { /* declarations */ }

So basically, what is happening is that you are applying the same dark background of your scene to the popup that shows the menu.

If you want a different background, or none, you just need to add to your css file the following CSS rule:

.root.popup {
    -fx-background-color: transparent;
}
José Pereda
  • 44,311
  • 7
  • 104
  • 132