CODEWITHSUNDEEP
cssjavafx-8
purring pigeon
purring pigeon

Reputation: 4209

How can I mimic the loss of focus styling with CSS in Java FX?

In my application I have a specific styling that states that yellow should be used to represent required fields. In my grids, I have implemented this as follows:

.table-cell-required-field {
    -fx-control-inner-background: -sif-required_field-color;
    -fx-background-color:-fx-table-cell-border-color, -fx-control-inner-background;
    -fx-border-color: deepskyblue  deepskyblue  deepskyblue  deepskyblue ;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
    -fx-text-fill: -fx-text-inner-color;
}


.table-cell-required-field:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
    -fx-background-insets: 0, 1, 2;
}

This works just fine - however, when the table isn't focused, the selected field is staying -fx-focus-color rather than reverting back to the standard in modena which has it as gray - which is confusing the users.

I have tried to use focus as a psuedo class as well - but looking in ScenicView both cells show both selected and focused and this has no change.

Here is an example of what I need to happen when the table isn't focused: enter image description here

However when I select the required field and then selected the other table it stays blue - I need this to go gray when it doesn't have focus. enter image description here

I would appreciate any help in what I am missing.

Thanks!

Upvotes: 0

Views: 419

Answers (1)

James_D
James_D

Reputation: 209358

Try 

.table-cell-required-field {
    -fx-control-inner-background: -sif-required_field-color;
    -fx-background-color:-fx-table-cell-border-color, -fx-control-inner-background;
    -fx-border-color: deepskyblue  deepskyblue  deepskyblue  deepskyblue ;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.0em;
    -fx-text-fill: -fx-text-inner-color;
}

.table-view .table-cell-required-field:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar-non-focused;
    -fx-background-insets: 0, 1, 2;
}

.table-view:focused .table-cell-required-field:selected {
    -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-focus-color;
    -fx-background-insets: 0, 1, 2;
}

Typically for styling at this level I look at the default modena.css stylesheet, which you can extract from your jfxrt.jar file, or see at the OpenJFX source.

Upvotes: 1

Related Questions