Styling unfocused selected rows in JavaFX TreeTableView with CSS

I am experiencing an issue with CSS on TreeTableView.

When I apply CSS to TableView like this :

.table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-fill: white;
}

The selected rows have white text, even when clicking out of the table.

For TreeTableView, I have defined CSS as follows :

.tree-table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-fill: white;
}

Although the selected rows have white text initially, it changes to black when clicking outside the table. Any suggestions on how to resolve this?

Thank you

Answer №1

If you want to adjust the text fill on the cells individually, try setting it directly on the cell itself rather than on the row:

.tree-table-row-cell:selected{
    -fx-background-color: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
}

.tree-table-row-cell:selected .tree-table-cell,
.tree-table-cell:selected {
    -fx-text-fill: white;
}

Additionally, don't forget about:

.tree-table-row-cell:selected .tree-disclosure-node .arrow {
    -fx-background-color: white ;
}

For a different approach:

The modena stylesheet usually sets the text fill based on a color lookup called -fx-text-background-color. This is determined by another color lookup called -fx-background, which defines the background color of rows and cells.

The "ladder" function used evaluates to different text colors depending on the intensity of the background color. If the background intensity is below 45%, white text is used, between 46% and 59% black text is used, and above that, grey text is used.

Changing the value of -fx-background instead of -fx-background-color typically adjusts the text fill accordingly:

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
}

In your case, the chosen background color isn't dark enough to trigger the light text color. With a darker background like #d1531f, the white text will display as expected without further changes.

To customize the intensity thresholds for the text color evaluation, you can modify the ladder function itself:

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-background-color: ladder(
        -fx-background,
        -fx-light-text-color 60%,
        -fx-dark-text-color  61%,
        -fx-dark-text-color  69%,
        -fx-mid-text-color   70%
    );
}

Alternatively, bypass the ladder entirely and set -fx-text-background-color directly to the light text color:

.tree-table-row-cell:selected{
    -fx-background: #f1734f;
    -fx-background-insets: 0;
    -fx-background-radius: 1;
    -fx-table-cell-border-color: white;
    -fx-text-background-color: -fx-light-text-color;
}

This method aligns with default CSS practices, allowing inherited looked-up colors to maintain consistency across the cells and automatically applying the same color to the disclosure arrow as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

What is the best way to create a list with images in a dropdown menu using HTML?

Thanks so much for your assistance! Below is the code snippet I am currently working on <li><a href="#Language">*LanguageHERE*</a></li> I am hoping to turn this into a dropdown menu that displays flags representing all available ...

Scrollbar customization feature not functional in Firefox browser

I recently finished developing a website and I have customized the main vertical scrollbar. Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox. Does anyone have any suggestions on how to trouble ...

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

When hovering over a circle in CSS with a background image to hide text, the shape becomes distorted

I am attempting to create a series of circles with background images and accompanying text displayed side by side. My goal is to have the image opacity change and the text disappear upon hovering over each circle. Additionally, I do not want underlines to ...

Div with a vertical line

Check out this jsFiddle link Struggling to get a "vertical rule" to span the entire width of its container in a div, specifically adjusting the border-right of a nested div. Margins have been modified, even tried margin-top: 20px; in the #vr, but no luck. ...

ReactJS -- Button Overlay Issue: Unresponsive Clicks when Positioned on Top of List

Please check out the Code Example in my Code Sandbox demo that I have set up https://codesandbox.io/s/W7qNgVnlQ I am trying to get the button action of the Floating Button to work, but currently it is triggering the Action assigned to the ListItem instea ...

"Conceal and reveal dynamic content using the power of jQuery's

Hello everyone, I'm encountering an issue with this code where I am trying to display a variable in the content. Take a look at the code below: I am attempting to show the variable $name in the div #divToToggle upon clicking, but the variable does no ...

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

Issues with the collapse feature in Bootstrap 5.1.3 accordion

I'm currently utilizing an accordion style to display various sets of information on a website. While all the correct information is being displayed, I am facing an issue where the accordion items are not collapsing as expected. Below is the code snip ...

Is there a way to arrange an HTML list in this specific manner using CSS or JavaScript?

I need to arrange a list of items in columns with 5 rows each, as shown in the attached image. This list is generated dynamically using an SQL query with a loop on the li tag. I am looking for a solution to order the list in this way using javascript or ...

Firefox is having trouble loading SVG files

For some reason, the SVG image is loading on all browsers except for Firefox. I checked the DOM but couldn't find the code. Just to clarify, I am serving the page from Tomcat 9.0.34 <kendo-grid grid-options="gridOptions"> <img src= ...

Adjust the colors of the borders upon clicking the button

Hello, I'm attempting to create a function where clicking on one button changes its border color to blue and changes the border color of all other buttons to orange. However, I'm encountering an issue where the border color for the other buttons ...

How can I align my logo on the website header separately from the menu tabs while keeping them on the same row?

Trying to vertically align a logo and headers' tabs in the same row can be quite challenging, especially when the logo is taller than the tabs. I've attempted different methods, including using padding to manually adjust the alignment, but it&apo ...

What impact does including lang=less in a Vue component's style have on its behavior?

Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...

What is the solution for adjusting the positioning of the `<select>` element in Bootstrap?

Here is a snippet of HTML code: <button class="btn">hello</button> <select class="input-small"><option>1</option></select> <button class="btn">world</button> The position of the select element is not correc ...

When hovering over the element, child elements remain unaffected by the wrapping behavior

My anchor tag contains a span and an image, but I am having trouble making them hover together. <a href=""> <img src="image"/> <span>Shopping Cart</span> </a> a :hover { opacity: 0.6; } Check out the fiddle ...

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

Firefox is having trouble keeping <select> tags within their designated borders

I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...

Utilizing nested flex containers with overflow-x property

I'm looking to set up a layout with 2 columns side by side. The first column should have a fixed width of 200px, while the second column should take up the remaining space on the screen. Additionally, I want the content in the second column to auto-sc ...