I've got a tableview that sets the background of a row based on the value of one of the row's columns. This is working and I'm doing it using a RowFactory as follows:
`
tv.setRowFactory(tv -> new TableRow<ticketRow>()
{
#Override
protected void updateItem(ticketRow p_ticketRow, boolean empty)
{
super.updateItem(p_ticketRow, empty);
if ( p_ticketRow != null )
{
if (!(p_ticketRow.getTBP().trim().equalsIgnoreCase("0.00")))
{
setStyle("-fx-font-size: 18 !important; -fx-background-color: #ffb2b2; -fx-text-fill : #000000; -fx-font-size: 18 !important; -fx-selection-bar: blue !important;");
}
else
{
setStyle( ".tree-table-row-cell:odd {-fx-background-color: #f9f9f9; -fx-text-fill : #000000; -fx-font-size: 18 !important; -fx-selection-bar: blue;}");
}
}
else
{
setStyle( "-fx-font-size: 18 !important; -fx-selection-bar: blue; .tree-table-row-cell:odd {-fx-background-color: #f9f9f9; -fx-text-fill : #000000; -fx-font-size: 18 !important;}; .tree-table-row-cell:even {-fx-background-color: #ffffff; -fx-text-fill : #000000; -fx-font-size: 18 !important;}" ); // -fx-font-size: 18;}" );
}
}
});
`
However, whenever I select a row whose background has been set by the if clause, the selected row color does not display. That row is not highlighting. The background color seems to take precedence.
How can I get the selected row to highlight when it's background has already been set because it met the column value condition?
Thanks
I'll be the first to admit I don't know much about CSS and I'm also just starting to work with JavaFX. In any case, after scouring more Stackoverflow posts I came across a problem/solution similar to mine where the solution was to use -fx-control-inner-background: and -fx-control-inner-background-alt:
I honestly don't know what these are or how they worked but I used them instead of -fx-background-color: and that worked.
Related
I'm new to JavaFX, and am confused by styles. I'm using OpenJFX 13.0.1. I have the following simple scene:
val oscs = HBox()
val osc1 = VBox()
val title = Text("Osc 1")
title.styleClass.add("text")
osc1.children.add(title)
oscs.children.add(osc1)
val root = BorderPane()
root.children.add(oscs)
val scene = Scene(root, 500.0, 400.0)
I have two issues:
-fx-text-fill isn't working to color the text, whereas -fx-fill is. I.e.
.text {
-fx-fill: #44FFFF;
}
works, whereas:
.text {
-fx-text-fill: #44FFFF;
}
does not. According to the docs, it seems like this is wrong.
Inheritance isn't working as I'd expect it to. Shouldn't the child nodes inherit from root?
The following doesn't work to color the label, regardless of whether it's -fx-fill or -fx-text-fill.
.root {
-fx-font-size: 24px;
-fx-font-family: sans-serif;
-fx-fill: #44FFFF;
-fx-background-color: #000000;
-fx-border-color: #44FF00;
-fx-border-width: 2px;
}
What am I doing wrong?
You probably got Label and Text confused.
Text is a subclass of Shape and does not provide a -fx-text-fill property. Furthermore Shape's -fx-fill property is not inherited. See CSS Reference Guide.
Other than going with Label you could use a descendant selector to assign the fill:
.root .text {
-fx-fill: #44FFFF;
}
Edit:
Label's -fx-text-fill is not inherited either. You should be able to fix both cases by specifying inherit as value for the -fx-text-fill or -fx-fill properties. The following should work for Text:
.root {
-fx-fill: #44FFFF;
-fx-background-color: #000000;
}
.text {
-fx-fill: inherit;
}
a.css:
.dialog-pane .button {
-fx-background-color: -fx-base; -fx-text-fill: white;
}
Code:
Alert confirmationDialog = new Alert(AlertType.CONFIRMATION);
confirmationDialog.getDialogPane().getStylesheets().add("a.css");
When I open the confirmation dialog, the Cancel button is styled correctly, but the OK button is not. However, if I change -fx-background-color to an actual color, like:
.dialog-pane .button {
-fx-background-color: red; -fx-text-fill: white;
}
Both buttons will be styled correctly. I've been googling for a while and I'm stumped. Any ideas why this is happening?
The default stylesheet handles the default button by changing the definition of -fx-base:
.button:default {
-fx-base: -fx-default-button;
}
So setting the background to -fx-base won't remove the default blue color.
It's not clear quite what you want to achieve, but you are probably needing something like
.dialog-pane .button {
-fx-background-color: -fx-base;
-fx-text-fill: white;
}
.dialog-pane .button:default {
-fx-background-color: -fx-default-button;
}
and then wherever you are changing -fx-base you should also change -fx-default-button.
I see my confusion. I was working on an existing stylesheet that was trying to use -fx-base like a variable even though it's the name of an existing attribute.
I am trying to hide the ComboBox arrow using the method in here, but for some reason I get this:
Try this:
.combo-box, .arrow, .arrow-button{
-fx-background-color: transparent;
}
to get rid of all other colours appearing (focused: border-color/border-glow and unfocused: shadow) add .text-field
.combo-box, .arrow, .arrow-button, .text-field{
-fx-background-color: transparent;
}
be aware that every text-field/arrow/arrow-button will be affected. To get around this, you need to add your css-style-sheet to the node itself
your-combo-box-node.getStylesheets().add(Main.class.getResource("styles.css").toExternalForm());
If you need more flexibility with the styling of the individual parts of the node itself, split up the css-code-line
.combo-box{ -fx- ... }
.arrow{ -fx- ... }
.arrow-button{ -fx- ... }
.text-field{ -fx- ... }
This is really old post but just an update if anybody need it. If you want to style just one combo box you can do it in two other ways. First to define id of the combo in Css
#idOfTheComboBox> .arrow-button > .arrow {
-fx-background-color: transparent;
}
#idOfTheComboBox> .arrow-button {
-fx-background-color: transparent;
}
or with class
.your-class > .arrow-button > .arrow {
-fx-background-color: transparent;
}
.your-class > .arrow-button {
-fx-background-color: transparent;
}
I try to style Java FX 8 TabPane component via CSS. Currently I'm struggling with different font color for selected and not selected tab-label. At the end, I want selected tab to have white font color, and not selected tab to have black font color. Unfortunately, I don't know how to refer to not selected or only to selected tab-label. I tried .tab-label:selected but it didn't work. I also tried something as .tab:selected > .tab-label but again, didn't work.
Below is CSS code I wrote so far and preview of the TabPane.
#tabPane {
-fx-background-color: #FFFFFF;
}
#tabPane .tab-header-background {
-fx-background-color: #FFFFFF;
}
#tabPane .tab {
-fx-background-color: #d0d0d0;
-fx-background-radius: 0;
-fx-padding: 5 10 10 10;
}
#tabPane .tab:selected {
-fx-background-color: #202020;
-fx-focus-color: transparent;
}
#tabPane .tab-label {
-fx-text-fill: #FFFFFF;
-fx-font-size: 18px;
}
PS Mentioned TabPane was modified only by above CSS code. There are no other modifications. Thus, no additional code.
I think
#tabPane .tab:selected .tab-label {
-fx-text-fill: black ;
}
should work. It may be important to have that after your #tab-pane .tab-label rule.
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.
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!
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...) */
}