Group nodes in gridpane in JavaFx

Question

is it possible to cluster cells of a gridpane in group nodes in javafx? The reason why I want to do this, is to apply different css selectors on subsets in the gridpane.

I have these cells in a gridpane (2 rows, 4 columns):

a1 | a2 | b1| b2
c1 | c2 | d1| d2

Where I have 4 subsets (a1, a2) (b1, b2) (c1, c2) and (d1, d2). I tried nested grids, However, this gives not a nice layout if the content of each cell has a different size (e.g. I get different column sizes for a1 and c1).

Please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). This will help us to understand what you are trying and provide a solution effectively. — Sai Dandem, Dec 21 '21 at 22:53

James_D · Accepted Answer · 2021-12-21T23:21:46.377

The reason why I want to do this, is to apply different css selectors on subsets in the gridpane.

You can simply give the nodes appropriate style classes:

a1.getStyleClass().add("a");
a2.getStyleClass().add("a");
b1.getStyleClass().add("b");
b2.getStyleClass().add("b");
c1.getStyleClass().add("c");
c2.getStyleClass().add("c");
d1.getStyleClass().add("d");
d2.getStyleClass().add("d");

Or in FXML

<Node fx:id="a1" styleClass="a"><!-- ... --></Node>
<Node fx:id="a2" styleClass="a"><!-- ... --></Node>
<Node fx:id="b1" styleClass="b"><!-- ... --></Node>
<Node fx:id="b2" styleClass="b"><!-- ... --></Node>

<!-- etc -->

Then you can select them and apply styles in the CSS:

.a {
    /* style rules for a1 and a2 */
}
.b {
    /* style rules for b1 and b2 */
}

Then, of course, just lay them out any way you need (e.g. in a single grid pane).

Group nodes in gridpane in JavaFx

1 Answers1