Unable to style horizontal or vertical boxes

Question

Very frustrating as I follow guides and basic tutorials. I can apply CSS styles to different elements, but not to vbox or hbox.

I have the following simple application, using FMXL and CSS to create a simple scene:

import java.net.URL;

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


public class BingRen extends Application {
    @Override
    public void start(Stage primaryStage) {
        Parent root = null;
        FXMLLoader loader = new FXMLLoader();
        URL xmlUrl = getClass().getResource("/BingRen.fxml");
        loader.setLocation(xmlUrl);
        try {
            root = loader.load();
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("BingRen.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

Using FXML, create just a BordPane and 2 HBoxes, each containing a label. Almost as easy as HellopApp:

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

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


<BorderPane fx:id="rootBorderPane"
        xmlns="http://javafx.com/javafx"
        xmlns:fx="http://javafx.com/fxml"
        fx:controller="MainControler">
    <top>
        <HBox>
            <Label text="BingRen app" />
        </HBox>
    </top>
    <bottom>
        <HBox>
            <Label text="Status bar" />
        </HBox>
    </bottom>
    <center>
    </center>
</BorderPane>

There is also CSS to set some basic properties:

.hbox {
    -fx-background-color: #00ff00;
    -fx-border-color: #00ff00;
    -fx-border-width: 2px;
    -fx-padding: 10;
    -fx-spacing: 8;
}

.label {
    -fx-text-fill: #0000ff;
}

The label correctly turns blue, but the hbox style is not applied

---

In fact, none of these suggestions work.

I tried:

• Change the .hbox in the css file to .Hbox
• Create #allbox in css file and add fx-id="allbox" and fxml file

With each change, I change the color of the label to ensure the new version of the CSS can be read.

The labels always change color but I never get the background or padding in the horizontal box

Answer 1

Why your current approach fails

ViewCSS Document.

ForHBox

For tags

Therefore, there is no style class like ".hbox" for HBox unless you add one, which you haven't done yet.

CSS Selectors and JavaFX Backgrounds

Read the section titled "CSS and JavaFX Scene Graph":

Application Example

So you can solve this problem in three ways:

1. Using type selectors in CSS files:

   HBox { <css rules> }

2. Apply Style classes in CSS files:

   .my-hbox-styleclass { <css rules> }

   and write in FXML:

   <HBox styleClass="my-hbox-styleclass">

   Or write in the code:

   myHBox.getStyleClass().add("my-hbox-styleclass");

3. Apply Style ID in CSS file:

   #my-hbox-id { <css rules> }

   and write in FXML:

   <HBox id="my-hbox-id">

   Or write in the code:

   myHBox.setId("my-hbox-id");

Selector range difference

The meaning of the standard application for each method is different:

1. Type selector Will be applied to all HBox types in the user interface.
2. Class Selector Will be applied to any content that has the given style class applied to it.
3. id selector Typically used for individual nodes in the UI, rather than the type or class of the node. It should be unique within the FXML document or scene graph tree, although this is not mandatory.