CODEWITHSUNDEEP
javafx-8
Jeedee
Jeedee

Reputation: 548

JavaFX 8: CheckBoxTreeTableCell styling

I have a TreeTableView in my application. The root is hidden. The next level is a list of groups, and below that is a list of users. Each row has a checkBoxTreeTableCell that allows the user to select individual users, or the groups that they belong to (which then selects all users in the group).

I'd like the style the checkboxes so that they fit in with the colour scheme of my application, but I can't find any examples on how to style them.

I've been able to change the colour of them when they're not selected by setting this in my application's css:

.check-box-tree-table-cell .box {
    -fx-background-color: #72BD2D;
}

However, I can't find a way to change the colour when the checkbox is selected. Nor am I able to change the colour of the border, check mark etc.

Does anyone have any ideas?

Please note (before marking this as a duplicate) that this is a check-box-tree-table-cell - not a check-box-table-cell. Likewise, it's a tree-table-cell, not a table-cell.

EDIT: On further examination, the class doesn't implement stylable so I'm guessing that this is what's causing the problem. I'm curious as to how I'm able to change the initial colour of the checkbox with the CSS above though, given that it isn't stylable?

Upvotes: 0

Views: 380

Answers (1)

Oliver Jan Krylow
Oliver Jan Krylow

Reputation: 1725

Inside the tree table cell sits just a regular check box, so you can style it like you would style any other check box.

Check out how a check box is defined in the default JavaFx theme (modena.css, search for check-box).

Try this example css as a starting point:

// container of check box
.tree-table-cell .check-box {
    -fx-background-color:pink;
}

// rounded box of check box
.tree-table-cell .check-box .box{
    -fx-background-color:green;
}

// checkmark of check box
.tree-table-cell .check-box .box .mark{
    -fx-background-color:yellow;
}


//Copied from modena.css
/*******************************************************************************
 *                                                                             *
 * CheckBox                                                                    *
 *                                                                             *
 ******************************************************************************/

.check-box {
    -fx-label-padding: 0.0em 0.0em 0.0em 0.416667em; /* 0 0 0 5 */
    -fx-text-fill: -fx-text-background-color;
}

.check-box > .box {
    -fx-background-radius: 3, 2, 1;
    -fx-padding: 0.166667em 0.166667em 0.25em 0.25em; /* 2 2 3 3 */
}

.check-box > .box > .mark {
    -fx-background-color: null;
    -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
    -fx-shape: "M-0.25,6.083c0.843-0.758,4.583,4.833,5.75,4.833S14.5-1.5,15.917-0.917c1.292,0.532-8.75,17.083-10.5,17.083C3,16.167-1.083,6.833-0.25,6.083z";
}

.check-box:indeterminate > .box {
    -fx-padding: 0;
}

.check-box:indeterminate  > .box > .mark {
    -fx-shape: "M0,0H10V2H0Z";
    -fx-scale-shape: false;
    -fx-padding: 0.666667em; /* 16x16 = 8+8 */
}

Upvotes: 1

Related Questions