CODEWITHSUNDEEP
cssjavafx
Sami
Sami

Reputation: 127

deactivate blue border from first row when table view is focused

I would like to deactivate in javafx showing the blue border in the first row when The table view is focused(see picture). I tried a lot of things in my css without success. I also did't find helpfull contribution here in the Forum.

thx in advance

enter image description here

Upvotes: 3

Views: 1191

Answers (1)

James_D
James_D

Reputation: 209438

The following works for me:

.table-view:focused .table-row-cell:focused {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}

Explanation:

The default stylesheet has the following CSS rule for focused, non-selected rows:

/* focused cell (keyboard navigation) */
.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused {
    -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
    -fx-background-insets: 0, 1, 2;
}

This works by drawing three backgrounds with three different insets (a technique called "nested backgrounds"). The first has insets of 0 (fills the whole row) and is in the default background color (-fx-background). The second has insets of 1 (so one pixel of the previous background is left visible); it fills a rectangle with the looked-up color -fx-cell-focus-inner-border. The third has insets of 2 (so it leaves one pixel of the middle background visible) and again has the default color.

The default row background is defined by

.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;
}

This again uses "nested backgrounds", with the first having zero insets and a background color of -fx-table-cell-border-color, and the second having the default background and insets of one pixel along the bottom edge only. So the effect here is a 1-pixel wide bottom border.

The CSS I used above just redefines the focused row to look like the non-focused row.

Upvotes: 6

Related Questions