How to correctly override default JavaFX 8 CSS on TableView


Tags: css,tableview,javafx-8

Problem :

I am attempting to override the default style of certain columns in a tableview in JavaFX. Basically I would like to have editable values present a lightyellow background so that people know that those columns are editable.

However when I set this CSS on the field:

.editableColumn.table-cell { 
-fx-background-color:lightyellow;
-fx-alignment:CENTER-RIGHT;
-fx-border-width: .5px; 
-fx-border-style: solid;
-fx-border-color:grey;
}

It removed the rest of the formatting, so highlight bars, etc are gone.enter image description here

What CSS properties do I need to set so that the highlighting works, so that my values don't vanish (here it's white on yellow so you can't see the value).

Thanks!



Solution :

If you just want to make sure the text color is appropriate for the background you set, try setting -fx-background to the same value as -fx-background-color:

.editableColumn.table-cell { 
-fx-background-color:lightyellow;
-fx-background: lightyellow ;
-fx-alignment:CENTER-RIGHT;
-fx-border-width: .5px; 
-fx-border-style: solid;
-fx-border-color:grey;
}

If you want the "selected style" to override the "editable style" for cells that are both in your column and are in a selected row, I think you will need to manually revert to the default styles for selected cells. Something like

.table-row-cell:filled:selected .editableColumn.table-cell {
    -fx-background-color: null ;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    /* -fx-border-width: null ; (not sure about this one...) */
}

    CSS Howto..

    Twitter Bootstrap - how to add some more margin between tooltip popup and element

    How to slice an Image Border for use in CSS?

    How can I get two buttons and textareas from separate forms to display inline?

    How to use jQuery to check if element breaks to the next line?

    How do I handle modal dialog fadeout in jQuery UI?

    How to center align a div vertically which uses bootstrap?

    How to make element stay in the same position using css?

    how to give css for arranging label, textbox and text area side by side in the same line

    How to understand this CSS inheritance (or override, selection)

    How to position the scaled elements (jQuery, css)

    How to make a horizontal div scroll bar float like a fixed CSS div

    ASP.NET DataBoundField DataFormatString, how can I add html correctly?

    How to mark up a tiled layout with CSS?

    multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?

    How can we wrap the line based on border size of windows browser?

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    how to make content to be fixed inside scroll div using only css?

    javascript or css: How to Hide any Number followed by dot Prefix “1.text”, “2.text”…“30.text” from a Text inside a Label

    How to use Knockout.js to change a CSS class on mouseover?

    How To Create Full Screen Fixed With Scrolling Background Images

    How to load multiple images quickly (without Css Sprites)

    CSS Web fonts how to use it with use of @font-face its not working

    How to create a list with three columns in a row by css and html?

    How to strike through obliquely with css

    How to put 2 text input fields in one?

    How to set ID or css selector for new row added in table using javascript

    How do I align text and an image vertically inside a DIV?

    How to create own responsive css grid system?

    How to refer to css file in codeigniter?

    How to create a speech bubble in css?