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*/
}
I have a JFXButton with a white background (instead of the "grey" default one), a transparent border and rounded corners. This is my style attribute :
-fx-border-color: rgba(0,0,0,0.25);
-fx-border-radius: 10;
-fx-background-color: #ffffff;
But this is actually what I get :
As you can see, the corners are colored and I don't want that. Is this a bug from JFoenix or am I doing something wrong ?
You can also apply a radius for the background property, which will let you have rounded corners without any background colour spill.
.jfx-button{
-fx-border-radius: 15pt;
-fx-background-radius: 15pt;
}
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 like the styling of the bars that comes with using -fx-bar-fill in my CSS code. However, there is a situation which calls for a bit of customization (I need one of my series' bars to have an striped pattern instead of merely a color). However, without using -fx-bar-fill the bars loose a number of properties beyond just the color, causing them to not match.
What is it exactly that -fx-bar-fill does? What are the individual properties such that I can re-apply them manually, if possible?
With -fx-bar-fill, you only specify a single color. From there it seems to then add:
(Working)
A linear gradient based on the color specified (-fx-background-color: linear-gradient())
A border color slightly darker than the color of specified (-fx-border-color: linear-gradient())
(Not fully working)
An inner glow linear gradient slightly lighter than the color specified (-fx-effect: innershadow(three-pass-box,#00FF00,2,0,0,0);?)
I can't seem to fully replicate the inner glow on a gradient. Is there another way to do it? Are there any other effects in -fx-bar-fill which I might be missing?
Zoomed version:
-fx-bar-fill is not a property, but a looked-up color (essentially a CSS variable that holds a color value; see the CSS documentation for the color type and scroll down just past the table of predefined color-swatches).
This looked-up color is used in setting the -fx-background-color property of the bars in the bar chart, which are implemented as regions. From the source code for modena.css:
.chart-bar {
-fx-bar-fill: CHART_COLOR_1;
-fx-background-color: linear-gradient(to right,
derive(-fx-bar-fill, -4%),
derive(-fx-bar-fill, -1%),
derive(-fx-bar-fill, 0%),
derive(-fx-bar-fill, -1%),
derive(-fx-bar-fill, -6%)
);
-fx-background-insets: 0;
}
So this sets the value of -fx-bar-fill to another looked-up color, CHART_COLOR_1 (more in a moment), and then defines the background color of the bars in the bar chart to a (very subtle) linear gradient whose color stops are based on its value.
Colors for bars in other series are set differently by redefining the value of -fx-bar-fill for bars in those other series:
.default-color0.chart-bar { -fx-bar-fill: CHART_COLOR_1; }
.default-color1.chart-bar { -fx-bar-fill: CHART_COLOR_2; }
.default-color2.chart-bar { -fx-bar-fill: CHART_COLOR_3; }
.default-color3.chart-bar { -fx-bar-fill: CHART_COLOR_4; }
.default-color4.chart-bar { -fx-bar-fill: CHART_COLOR_5; }
.default-color5.chart-bar { -fx-bar-fill: CHART_COLOR_6; }
.default-color6.chart-bar { -fx-bar-fill: CHART_COLOR_7; }
.default-color7.chart-bar { -fx-bar-fill: CHART_COLOR_8; }
and those individual colors are defined as
CHART_COLOR_1: #f3622d;
CHART_COLOR_2: #fba71b;
CHART_COLOR_3: #57b757;
CHART_COLOR_4: #41a9c9;
CHART_COLOR_5: #4258c9;
CHART_COLOR_6: #9a42c8;
CHART_COLOR_7: #c84164;
CHART_COLOR_8: #888888;
So the net result is that, for the first series, the bar starts at the left edge with a color 4% darker than #f3622d, lightens (in a non-linear way) to #f3622d at the center, and then darkens by 6% to the right edge.
James_D led me to the answer with his post above. I would only add (for the record) that his java version (8_u60) is newer than mine (7_u75), which uses a different CSS file for styling the bar charts. To provide the answer specific to my java version (i.e. to get my exact result in terms of how the bars are styled for me), the CSS for the -fx-bar-fill is as follows:
.chart-bar {
-fx-bar-fill: #22bad9;
-fx-background-color: linear-gradient(derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)),
linear-gradient(derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)),
linear-gradient(derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%));
-fx-background-insets: 0,1,2;
-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;
}
I'm displaying a dashed border around an input text element with:
border: 1px dashed black;
Can I somehow define an "offset" to tell the browser where to start with the border?
My goal is to define a timer, and alter the offset of the dashed border (using java GWT element.setAttribute()), so that the simulation of a clockwise-moving dashed border results.
Is there any existing offset for borders with css?
There is a somewhat convoluted workaround to achieve a similar effect using an animated .gif as the background of a div, with whatever content you wanted "bordered" placed in a second div nested within the first with a 1px margin.
The animated .gif should be a small square (8px x 8px) with 3px-wide diagonal lines moving across it from left to right (you can adjust the sizes to adjust the width of the lines). When only a pixel's width or height of this image is visible, it appears to be a moving dashed border.
This technique is detailed here by Matthew Taylor at his blog: http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page.