CODEWITHSUNDEEP
cssjavafx
Duane Allman
Duane Allman

Reputation: 571

Which JavaFX CSS property is this?

Weird insets

I have this table view in JavaFX, I wanted to put a grey border around the selected row so I added this css rule:

.table-row-cell:selected {
    -fx-border-color: grey;
}

However I seem to have lost some padding along the way and the row appears shifted to the left. (See image)

Is there some padding property I should be adding in? I'm a total CSS newbie which doesn't help when scanning through the caspian.css file :/

Upvotes: 1

Views: 281

Answers (1)

José Pereda
José Pereda

Reputation: 45456

By default, a TableRow doesn't apply a border, so the different TableCell elements within the row take the whole space of the row.

With your css:

.table-row-cell:selected {
    -fx-border-color: grey;
}

you are applying a border to the row, with a default width of 1 pixel. When the row is selected, in order not to disturb the rest of the rows, to allocate this border, each cell has to take into account a decrease of 1 pixel in every of its four sides.

This means that each cell is 2 pixels shorter and narrower, and therefore there is a shift to the left when they are rendered, as can be seen in the posted screenshot.

The cell size change can easily checked with ScenicView.

While this is probably a bug (as with row selection only the height should be modified for all the cells, applying only 1 pixel in the left of the first cell and 1 pixel to the right of the last cell), there is an easy solution, if you have a look at how modena.css is applied.

Instead of using border colors, cells and rows use two background colors with some shift between them to create a border effect.

.table-row-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0;
    -fx-text-fill: -fx-text-background-color;
}

For every row, the color underneath is defined by -fx-table-cell-border-color, and with a one pixel shift in the bottom, the main color on top is defined by -fx-background. When the table row is selected, the insets shift to -fx-background-insets: 0, 1. Note that also -fx-table-cell-border-color is used as a "border" color for each cell.

The solution to apply a custom grey border color, without modifying the cells within the row, is:

.table-row-cell:selected {
    -fx-background-color: grey, -fx-background;
}

That way, you still keep the top background color for the row and the border color for the cells.

Upvotes: 1

Related Questions