As I have custom cells for a particular ListView, I have big trouble to understand how to to remove the "natural" sort of margin / spacing there is between each cells, and, even worse, on the right and left sides of said cells.
Here's an example:
]1
As you can see, I use a color to bring out each cell. You cannot see the space at the end of the cells (on their right side), because I need to scroll, but you can trust me, the white space is equal on each side (bigger on the left & right, though...) which is not normal as I have specifically designed these cells so that their width is as large as the ListView so that there is no need to use horizontal scrolling. My issue kinds of defeat my purpouse...
Each cell consists of one AnchorPane with the image and the one label.
The AnchorPane is painted in yellow (-fx-background-color: yellow;).
And as you can clearly see, there is these white spaces all around the cells.
FYI, here I am using JavaFX 8 / 2.2 SDK but I intend to use JFoenix JFXListView & JFXListCell. However, the spacing is even worse using those.
Strange point: I also painted the ListViewin green, but such color is nowhere. to be seen. I guess all the cells (and the empty one) overwrites the ListView content, so it would make sense not to see its background. However, this means the cells are somehow "corrupted" since white spaces are "added" all around my cells.
I have tried to set padding to 0 for everything but in vain.
Finally, in the onUpdateItem method, I do call the super method and when the cell is not flagged as empty, I set the graphic to the aforementioned AnchorPane otherwise I set it to null, which is clearly consistent to my screenshot.
Thanks for the help !
If you look at the default CSS stylesheet for JavaFX, modena.css, you'll see:
.list-cell {
-fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
}
This is where the padding for the ListCells is coming from. To remove this padding simply add your own stylesheet which contains:
.list-cell {
-fx-padding: 0px;
}
Or call setStyle for each of your ListCells:
setStyle("-fx-padding: 0px;");
The second option would best be done by using a custom cell factory.
listView.setCellFactory(v -> new ListCell<>() {
{
setStyle("-fx-padding: 0px");
}
#Override
protected void updateItem(Object item, boolean empty) {
super.updateItem(item, empty);
if (empty || item == null) {
setText(null);
setGraphic(null);
} else {
// your custom display logic
}
}
});
Also, after some quick testing with JFoenix it looks like using the above will also work for JFXListCell; though you have to be careful about overriding updateItem because JFXListCell does a lot in its implementation.
I set the red background of the cell as default to make sure that the artifacts I see between cells are in fact created by the .list-cell.
No matter how hard I tried, I could not get rid of it, even with the padding 0px. The red background was still visible every other cell in my case.
I suppose, it is a rounding error...
So, the only thing that worked was using a negative padding to remove any spacing | padding | margin between cells.
.list-cell{
-fx-font-weight: normal;
-fx-text-fill: white;
-fx-padding: -1px;
-fx-background-color: red;
}
Related
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*/
}
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 am currently using a JavaFX TableViewin an application and experiencing the following strange behaviour:
The resize policy is set to CONSTRAINED_RESIZE_POLICY, and when I start the application, the window is not maximized. However, when I maximize the window, two things happen:
The columns do resize, but do not fill the whole space, there is still some space left on the right side.
The columns do not line up with the headings anymore.
As soon as I resize one column manually, the layout is adjusted and everything looks as expected - meaning the columns fill the whole space and line up with the headings.
This is the css I apply to the table:
.rowWithTopBorder {
-fx-background-color: #555555, -fx-background ;
-fx-background-insets: 0, 2 0 0 0;
}
.boldRow {
-fx-font-weight: bold;
}
Is there a bug or am doing something wrong?
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 need to make a ring in JavaFX using fxml. It will be circling an item on an image beneath it. I can make a circle, but it seems to be required to have a fill. I can adjust the opacity, but that adjusts the opacity of both the fill and the circle.
I don't have image editing software at work (and I can't just install gimp) so I can't create an image and use an ImageView. Paint won't let you save images without backgrounds.
It seems like such a simple task to create a circle without a fill. Am I missing something?
Thanks
You can use the circle for that, just make sure to add this in your CSS:
.circle {
/* The numbers before the alpha doesn't matter.
As you imagine this would be green if the alpha was higher
rgba(RED,GREEN,BLUE,ALPHA); RGBA
*/
-fx-fill: rgba(0,255,0,0);
}
if you want to have other circles you can specify an specific css class for this:
.ring {
-fx-fill: rgba(0,255,0,0);
}
Then:
circle.getStyleClass().add("ring");
You can use fill with color.TRANSPARENT and stroke with color you want.
Or, following the same idea as Mansueli, use this programmatically:
circle.setFill(new Color(0,0,0,0));