I'm having a little trouble regarding FX, CSS and the TreeTableView.
I have cells containing blue Hyperlinks. Now if the cell is selected, the background becomes blue and thus the link is practically invisible. I'd now like to change the background color of selected cells using Stylesheets.
For TreeView the following works fine:
.tree-view .tree-cell:selected{
-fx-background-color: green;
}
So analogously I tried:
.tree-table-view .tree-table-cell:selected{
-fx-background-color: green;
}
But this had no effect.
Surprisingly though I was able to change the general background color with this:
.tree-table-view .tree-table-cell{
-fx-background-color: yellow;
}
The cells were now all yellow but this is seems to override the default selection pattern as now even selected rows had a yellow background.
For me it seems as if the state selector does not apply to TreeTableView cells but I have no clue how to achieve this another way.
I also tried this with the Example 15-2 from the JavaFX documentation, getting the same unsatisfying result.
I was not able to find any solution on the web as all questions seem to regard TreeViews or TableViews but not the combined TreeTableView. So any hint or link to the right doc would be very helpful!
Thanks in advance!
P.S:
I am aware that one could cirumvent the problem by changing the color of the Hyperlink but there must be a way to change the cell's color, right?
You can use the .tree-table-row-cell selector with the -fx-background-color property you mentioned:
.tree-table-row-cell:selected {
-fx-background-color: green;
}
and you can also change the border color to better fit to the filling color:
.tree-table-row-cell:selected {
-fx-background-color: green;
-fx-table-cell-border-color: green;
}
You may apply more styles to the underlying table cell by using:
.tree-table-row-cell:selected > .tree-table-cell{
/*enter style rules here*/
}
Related
I am relatively new to JavaFX and I have been using a CSS file to have a base for my buttons. I am looking to make a light theme and a dark theme, and for that, I want to use the color adjust settings, to adjust the brightness of my ImageViews and by that change them from black to white and vice versa. I did not find any documentation about this CSS reference and I would appreciate any help :)
One thing I found about the ColorAdjust is its FXML implementation
<ColorAdjust brightness="0.75" contrast="0.68" hue="0.73" saturation="0.78"
Here is my CSS code if needed:
.button{
/* Background */
-fx-background-color: transparent;
}
.button:hover{
-fx-background-color: #a1a1a1;
}
.button:pressed{
-fx-background-color: transparent;
}
.imageview{
}
.toolbar{
-fx-background-color: #ffffff;
}
I'm not sure this css problem or something else. Javafx doesn't have css styling for text selection cursor because maybe javafx not designed to be a mobile application. When I'm searching about it. I found css styling for input caret. Like this but that's not the case for the problem i have. Any help would be appreciated.
Here there sample what i want.
Here is my javafx project after porting into android
Yes, there is a way.
JavaFX's built in controls TextField and TextArea define the caret node, using caretHandle, selectionHandle1, selectionHandle2 stackpanes with CSS style classes caret-handle and selection-handle.
This is still valid in the latest JavaFX version:
caretHandle.getStyleClass().setAll("caret-handle");
selectionHandle1.getStyleClass().setAll("selection-handle");
selectionHandle2.getStyleClass().setAll("selection-handle");
On a regular desktop platform, you would use modena.css, where the caret-handle, selection-handle style classes are not used.
However in other platforms like Android, where embedded.css or touch.css are used, these do use the style classes:
.caret-handle {
-fx-background-color: transparent,
black /*#ACACAC*/,
linear-gradient(to bottom, #AFAFAF 0%, #DFDFDF 100%);
-fx-shape: "M11.974,2.579L20,12.358V20H4V12.356L11.974,2.579z";
...
The path in -fx-shape sets the shape you have posted in your picture:
Being set by CSS, you can always override the shape with your own.
You just need to add it to your CSS file, like:
.caret-handle {
-fx-background-color: blue;
-fx-shape: "M 100,100 m -75,0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0z";
-fx-background-insets: 0;
-fx-padding: 0.5em;
}
that will give you:
This question already has an answer here:
Transparent background of a textarea in JavaFX 8
(1 answer)
Closed 5 years ago.
Right now in my CSS style sheet for JavaFX I have something like this. #myText is a tag in my FXML file. So what appears currently is a black textArea with red text, which is fine. I want to make the background of the textArea transparent (by changing the opacity) but keeping the text a solid color. Adding fx-opacity turns the background as well as my text transparent, so how do I get around this?
#myText{
-fx-background-color:black;
-fx-text-fill: red;
}
#myText .content {
-fx-background-color: black;
}
you can use the transparent colour to do that, it is as simple as:
-fx-background-color:transparent;
A useful source to help with more CSS commands is the Oracle JavaFX CSS reference guide
UPDATE
sorry I wasn't aware that you didn't want it fully transparent, in this case you can use:
-fx-background-color: rgba(0,0,0,0.7);
this uses the RGB colour scheme but with the ability to adjust the final value for opacity, being from 0.0 to 1.0, 0.0 obviously being completely transparent and 1.0 being completely shown.
So in my Java Application I have a grid pane with a time table of various names.
To change the color of the one my mouse is hovering over I do this:
.hours_grid_cell_pane:hover{
-fx-background-color: #ffff00;
-fx-border-color: #000000;
}
This is pretty simple. I want to know how I do the same thing to all the cells to the left, right, top, and bottom of the one I'm hovered over. Essentially forming big where my mouse is.
I've tried
.hours_grid_cell_pane:hover:left
and
.hours_grid_cell_pane:left
but that doesn't work. Is there any way to do this?
I was using an image editor last night for a certain picture. I set the text in the picture to #00fffb(cyan), later that day I made a program in JavaFX8 and noticed that a label set to the same color(#00fffb) did not have the same color on screen. I also noticed that the cyan-looking colors looked different in the color chooser than they do on screen. NOTE: The fonts were the same as well. Also, I used a black background to compare the two.
Label CSS:
.controlScreenLabel{
-fx-font-family: Lucida Fax;
-fx-font-size: 23px;
-fx-text-fill: #00fffb;
}
Looks like subpixel rendering.
Zoom in on the [Updates] label and you will see typical rainbow colors produced by that tech.
There is probably a switch to turn it off (though I don't know how it globally).
I think you can use css to manipulate the rendering from stylesheets: see -fx-font-smoothing-type: gray. Of you can set values in code.
You can read up on subpixel rendering on Wikipedia.
Error in your CSS
Your label css is not setting the font correctly, it should quote the font family, for example:
-fx-font-family: 'Lucida Fax';