I encountered a frustrating problem with styling a javafx graph. Hope that somebody can help me out.
Using the JavaFx-library I made a StackedBarChart and a LineChart combined in one scene:
StackPane stackpane = new StackPane();
stackpane.getChildren().addAll(lineChart,stackedBarChart);
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
Style.css looks as follows:
.default-color0.chart-series-line { -fx-stroke-width: 4px;-fx-stroke: #3F48CC; -fx-stroke-dash-array: 12 12 12 12;}
.default-color0.chart-bar { -fx-bar-fill: #AA3B3B }
.default-color1.chart-bar { -fx-bar-fill: #FFC000 }
.chart-plot-background { -fx-background-color: transparent; }
The resulting image is:
Resulting image
Now I want to turn everything that is lightgrey (the background) into white. I tried that by adding the following styling:
.chart {-fx-background-color: white}
But this simple action makes the linechart (with the title of the chart) disappear:
Resulting image after adding style line
It seems that the .chart class refers to the background of the barchart, which is covering the linechart. Therefore: how to set the background of the entire image? Or should I make the background of the barchart-layer transparent and the background of the linechart-layer white? And if so: how to do that?
Thanks a lot!
If you use SceneBuilder, you can drop a control onto the design page, then click on View / Show CSS Analyser and it will open a window at the bottom that shows all of the styling properties for the selected object. If an object has multiple components on it, you can click on each one and see the related styling options.
Also, at the top of that lower window, you will see and arrow in a circle ... click on it to see more sub layer styling info that is related to whatever you have selected in the design window.
Related
How can I style a ComboBox "body" part not the dropdown?
As you can see on the screenshot I want to style just that part where you click and opens the dropdown and the dropdown should remain as it is.
If I try for example:
.combo-box-base .list-cell{
-fx-background-color: red;
}
everything goes red not just what I want.
I had a look at this question: Javafx combobox styling
but it didnt really helped me, it styles everything but not that specific part I need.
I have also looked with ScenicView, and I could locate it and add as style: -fx-background-color: red and it worked, but from code I could't manage it.
In ScenicView I saw the ComboBox has three components:
a StackPane a ListView and a ListCell. I want to style just the ListCell part.
Here is how it looks like if I add those line in my.css:
As you can see I don't want the dropdown to be styled.
How can I solve it.
Note: the arrow should remain as it is, just that part where the text is shown, as the second screenshot shows.
I'm trying to create a javafx application (in scenebuilder).
How to get transparent stage, with solid items (buttons etc) on it? As it is done in Windows 10 calculator. The buttons are solid but the rest of the pane is transparent.
Thanks in advance.
To do that, first, you need to put the scene in a transparent Stage :
myStage.initStyle(StageStyle.TRANSPARENT);
Be aware: if you do this, you need to use your own exit button, minimize buttons, because the titlebar will be gone.
Then, change the alpha channel of your scene to your desired, say 0.5:
scene.setFill(Color.rgb(0,26,0,0.5));
and finally, the root node's Background needs to be empty:
root.setBackground(Background.EMPTY);
You are done. Now you can change the translucency of your application through the alpha variable.
I had a hard time figuring out why my transparent stage refuses to be transparent. Finally I found out, that it was caused by a Tooltip that was installed into an ImageView:
ImageView imageViewIcon = new ImageView();
imageViewIcon.setFitWidth(70);
imageViewIcon.setFitHeight(70);
imageViewIcon.setPreserveRatio(false);
imageViewIcon.setImage(new Image("./next.png"));
Tooltip tooltip = new Tooltip("Tooltip!");
if (this.config.getShowTooltip("true")) {
Tooltip.install(imageViewIcon, tooltip);
}
When I comment out the last 4 lines, the transparency works as expected, but with the Tooltip installed the stages background is grayish (e.g. the default window background). Though it's obvious what the button does and the tooltip is not essential for my layout it'd be nice to have, just to give a little hint...
Any suggestions or workarounds?
Solution
Set the style -fx-background-color: transparent on the root node of the scene.
Background
Similar behavior is discussed in an Oracle JavaFX Forum post on the JavaFX Scene/Fill Color.
Relevant comments from the thread by David Grieve, the lead developer for the JavaFX CSS features:
This happens because modena.css sets the background color of the root node. Setting the style -fx-background-color: transparent on the root node of the scene is the solution.
BorderPane root = new BorderPane();
root.setStyle("-fx-background-color: transparent;");
Scene scene = new Scene(root, 600, 400, Color.BLACK);
The default user agent stylesheet is loaded the first time a Control is instantiated. The reason for this is to avoid loading stylesheets and reduce CSS overhead in scene-graphs that contain nodes that don't use CSS.
The history behind it is that the designer of the modena theme felt that the controls looked better on this particular background color, which is a very light grey. Unfortunately, the Scene's background fill cannot be styled from CSS, so the style was set on the root node of the scene. There is an issue logged in JIRA to make Scene so that it can be styled by CSS (RT-31282)
The merit of loading in this way is to avoid css overhead in scene's that don't use controls. This would be typical of a splash screen, for example. Or maybe a game. This design choice was made a long time ago when CSS performance was a big issue, but it still makes sense for embedded devices.
In the case of your question, Tooltip is a control, so when you add it to the scene it implicitly triggers the default modena.css stylesheet to be loaded for the scene (which sets the background of the root node of the scene to gray rather than a null or transparent fill which is used when there are no controls in the scene). To retain the transparent background for the application when a control is used in the scene, it is necessary to explicitly set the scene root node background to transparent.
Sample code for a transparent stage:
//this is where the transparency is achieved:
//the three layers must be made transparent
//(i) make the VBox transparent (the 4th parameter is the alpha)
root.setStyle("-fx-background-color: rgba(0, 0, 0, 0);");
//(ii) set the scene fill to transparent
scene.setFill(null);
//(iii) set the stage background to transparent
stage.initStyle(TRANSPARENT);
I'm new to both JavaFX and CSS. I'm using Scene Builder, and have an accordion that I want to use as a menu bar. I want the background of the accordion to either be transparent or to match the background of the page behind it, and the text to be fully opaque and a different color. Also, I do not want the arrows beside the text to appear. I've tried the various options that Scene Builder provides, but none enabled me to do either of these two things. Is this something I'll need to do with CSS, and if so, how?
I solved the issue with css. JavaFX uses a file called caspian.css for its standard styling.
An accordion module contains titled panes that consist of a title and a content area.
To remove the background color of the content you need to overwrite the styleClass of the titled panes:
.accordion .titled-pane > *.content {
-fx-background-color: null;
}
You could also assign a custom styleClass to your titled panes or accordion if you don't want to overwrite the style application-wide.
Hope this helps.
I am trying to use JavaFX Scene Builder to create the UI for my application.
I am using a CSS file to style controls in my interface. I have noticed that some controls (TableView, TreeView) have a default grey border which I don't want.
I have tried setting the -fx-border-style: none; and the -fx-border-width: 0; neither of which have worked. I then tried to set the border color for individual sides (-fx-border-right-color:#FFF;) but this did not work either. The only thing I can change is the border color for all sides.
Does anyone know how to get rid of the default border, and also how to style the border for individual sides of these controls?
for me the following worked:
TreeView tv = (TreeView) scene.lookup("#myTree");
// ... setup your tree
tv.setStyle("-fx-border-style: none; -fx-background-color:transparent;");
HTH,