B4J Question How to move CSS Extra Properties to a CSS Stylesheet

Similar threads

B4J Code Snippet Dark theme - base color
B4J Tutorial CSS Example
B4J Question Attaching different CSS styles to similar nodes
B4J Tutorial [WebApp] Web Apps Overview
B4J Library [class] CSS Utils

GuyBooth

Active Member
Licensed User
I have a tableview to whose CSS Extra property I have added the following statements:
B4X:
-fx-selection-bar: #84A082;
-fx-selection-bar-non-focused: #84A082;
I have these other styles, which have to be added with a stylesheet:
B4X:
/* Selected row without hover (Darker Green #84A082.)*/
.table-view:focused .table-row-cell:filled:focused:selected {
    -fx-background-color: #84A082;
}
/* Selected Row hovered (Darker Green #84A082.)*/
.table-view:row-selection .table-row-cell:filled:selected:hover {
    -fx-background-color: #84A082;
}
/* Row hovered (Lighter Green #ACC2AB.)*/
.table-view:row-selection .table-row-cell:filled:hover {
    -fx-background-color: #ACC2AB;
}
The combination works, but I want to consolidate all the statements into the stylesheet. So far I have not found the correct stylesheet statements for the ones in the CSS Extra property. I have tried every combination I can think of (except, apparently, the correct ones) such as these:
B4X:
.table-view:selection-bar {
    -fx-background-color: #84A082;
}
.table-view:non-focused:selection-bar {
    -fx-background-color: #84A082;
}
and
B4X:
.table-view-selection-bar {
    -fx-background-color: #84A082;
}
.table-view:non-focused-selection-bar {
    -fx-background-color: #84A082;
}
so far with no success.
Can anyone please show me how to do this?
 

GuyBooth

Active Member
Licensed User
Have you tried:
B4X:
.table-view {
-fx-selection-bar: #84A082;
-fx-selection-bar-non-focused: #84A082;
}
Yes I tried that, it has no effect. I'm using tableview extension and wondering whether CellFactory has anything to do with it - just a hunch …
I recommend you to use B4XTable for new projects. More powerful and easier to use.
If I can figure out how to remove all the header nodes (the arrows, search bar etc) to start with ...
 
Top