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

Discussion in 'B4J Questions' started by GuyBooth, Apr 17, 2019.

Similar threads

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

    GuyBooth Active Member Licensed User

    I have a tableview to whose CSS Extra property I have added the following statements:
    Code:
    -fx-selection-bar: #84A082;
    -fx-selection-bar-non-focused: 
    #84A082;
    I have these other styles, which have to be added with a stylesheet:
    Code:
    /* 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:
    Code:
    .table-view:selection-bar {
        -fx-background-color: 
    #84A082;
    }
    .table-view:non-focused:selection-bar {
        -fx-background-color: #84A082;
    }
    and
    Code:
    .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?
     
  2. Erel

    Erel Administrator Staff Member Licensed User

    Have you tried:
    Code:
    .table-view {
    -fx-selection-bar: 
    #84A082;
    -fx-selection-bar-non-focused: 
    #84A082;
    }
    I recommend you to use B4XTable for new projects. More powerful and easier to use.
     
  3. GuyBooth

    GuyBooth Active Member Licensed User

    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 …
    If I can figure out how to remove all the header nodes (the arrows, search bar etc) to start with ...
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice