I can not set transparent background in scrollpane. Probably because it contains anchorpane, and that anchorpane contains buttons? White background from scrollpane and red from anchorpane:
You have to use css and like this:
.scroll-pane{
-fx-background-color:transparent;
}
and(cause ScrollPane has a Viewport)
.scroll-pane > .viewport { //not .scrollpane but .scroll-pane
-fx-background-color: transparent;
}
or
.scroll-pane .viewport {
-fx-background-color: transparent;
}
If it doesn't work,either you have not defined externall css file well,or you have added some kind of container into the ScrollPane which has also a default background color.
Set an id to your AnchorPane in the fxml and then in your css assign the id to -fx-background-color : transparent.
Hope this works.
if not Please Refer to this question
JavaFX ScrollPane border and background
Related
I have a JavaFX application using gradle. I have used an Accordion as container for my TitledPane for my menu. The problem is that I can't set the TitledPane height according to sum of it's content height.
For example TitledPane 1 has 3 button inside:
So I set the height manually. But for TitledPane 2 I need to set height exactly for 1 button and remove extra blank spaces:
How could I do that? By the way the button border of Accordion gets disappear when I expand any TitledPane. My tress structure of Accordion is:
I have tried using css like:
.accordion .titled-pane {
-fx-fit-to-height: true;
}
or:
.accordion .titled-pane {
-fx-fit-to-height: true;
}
or some other css codes.
I have a button in JavaFx stylized with CSS, but without "button:hover" clause. The text alignment in css is set to right, but sometimes apears aligned to left. When I put mouse over button, the text alignment change from left to right and I don't have nothing in CSS about onMouseOver (or that I think ). I don't know if is a bug.
CSS:
.button{
-fx-font-size: 1em;
-fx-padding: 0 0 -30 0;
}
.menu, .label{
-fx-font-size: 0.8em;
}
...
#btPlusLargo{
-fx-background-color: transparent;
-fx-background-image: url('../resources/plus.png');
-fx-text-alignment: right;
-fx-background-repeat: no-repeat;
-fx-background-position: left center;
-fx-padding: 0 0 0 0;
}
...
In FXML
<Button id="btPlusLargo" fx:id="btEntregaTodo" layoutX="773.0" layoutY="532.0"
mnemonicParsing="false" onAction="#onClickAgregaTodo" prefHeight="25.0"
prefWidth="150.0" stylesheets="#botones.css" text="%bt.AgregaTodo"
textAlignment="RIGHT" AnchorPane.bottomAnchor="104.0"
AnchorPane.rightAnchor="9.0" />
Without mouse over
With mouse over (It would always have to be like that.)
Edit:
Ok, I see that it depends on the TableView above the button. If I select the Table View, I have the problem, but when I click out of TableView, it's show ok.
Edit2: It shows badly when I click on any other FXML field
I just want to change the color of the fill circle on a RadioButton. Surprisingly I couldn't find this in documentation. Is it possible?
I found this similar thread with a solution that is not working for me: CSS Change radio button color in JFXRadioButton
Here is how I have tried it (also tried other variations to no avail):
.radio-button .radio {
-fx-selected-color: yellow;
-fx-unselected-color: blue;
}
-jfx-selected-color and -jfx-unselected-color are not defined in JavaFX. They are attributes from JFoenix (docs). Also -fx-selected-color and -fx-unselected-color are not available in JavaFX.
To change the color of the dot in the RadioButton you can use the :selected pseudoclass like this (docs):
.radio-button:selected .radio .dot {
-fx-background-color: red;
-fx-background-insets: 0;
}
Additionally to the -fx-background-color you should set -fx-background-insets: 0;, because otherwise the dot is not exactly in the center anymore.
The result will look like this:
This CSS code changes the text color of the whole text of a MenuItem:
.context-menu .label {
-fx-text-fill: blue;
}
The thing is that I only want to change the Accelerator display text.
The CSS reference of JavaFX was not very helpful: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#contextmenu
So how can you set the style of the Accelerator display text in a ContextMenu using CSS?
I inspected the skin and found out the accelerator-text class is assigned to the Label that displays the accelerator, which means you can use
.context-menu .accelerator-text {
-fx-text-fill: blue;
}
to style the Label displaying the accelerator.
I just gave a menuItem an id
fxml:
<MenuItem id="menuItem" mnemonicParsing="false" text="Close" accelerator="Shortcut+C"/>
and tried:
css:
#menuItem>Label {
-fx-background-color: #0093ff;
-fx-text-fill: #ffff00;
}
and it worked.
Hello i'm trying to change the color of an ImageView when your mouse is on it(hover)
So I have a css file that contains this:
.cross:hover {
-fx-background-color: red;
}
And this is cross:
#FXML
private ImageView cross;
I set the fx:id in the fxml file.
Now nothing happens when I hover over it.
This is how I add the style sheet to the scene:
scene.getStylesheets().add(getClass().getResource("Style.css").toExternalForm());
This is how I set the id for css on the ImageView:
cross.getStyleClass().add("cross");
So how would I change the color of the ImageView when I hover over it?
The color of an ImageView is defined by the pixel data in the image itself. You probably need to create (externally) an alternative image with the "background" changed to red, and then use the -fx-image CSS property of ImageView to change the image displayed:
.cross {
-fx-image: url(images/cross.png);
}
.cross:hover {
-fx-image: url(images/red-cross.png);
}
where the images folder has the same parent folder as the CSS file (see CSS docs on URL.)