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.)
Related
I have an SpannableString text with links on com.google.android.material.checkbox.MaterialCheckBox view.
I need to disable actual checkbox toggling while user clicks on link in CheckBox text.
I achieved that by caling view.cancelPendingInputEvents() in ClickableSpan's onClick.
However, the ripple effect on the checkbox is still present. I was able to disable it by calling this, also in ClickableSpan's onClick:
var drawable = textView.background
if (drawable is RippleDrawable) {
drawable = drawable.findDrawableByLayerId(0)
textView.background = drawable
}
The problem is, how I should revert this? How to revert default MaterialCheckBox ripple effect after click is done?
I can't set a background image for a Hbox.
I tried this:
HBoxName.setStyle("-fx-background-image: images/background.png");
in the initialize method and then I also tried adding the CSS style in Scene Builder: -fx-background-image and url("images/background.png").
How can I do it?
There is a couple of ways to set a background image for your HBox,
1. Using CSS
Using setStyle method
Use setStyle() method to set a background image directly,
HBoxName.setStyle("-fx-background-image: url('images/background.png');" +
"-fx-background-repeat: stretch;" +
"-fx-background-size: 1000 700;" +
"-fx-background-position: center center;");
Using external CSS file
You should create an external CSS file load it to your scene(or you can load CSS file to any control as well),
scene.getStylesheets().add(
this.getClass().getClassLoader().getResource("style.css").toString()
);
Add these styles in your style.css file,
#HBoxName{
-fx-background-image: url("images/background.png");
-fx-background-repeat: stretch;
-fx-background-size: 1000 700;
-fx-background-position: center center;
}
References
JavaFX CSS Reference Guide
Apply CSS
CSS file on FXML
2. Setting BackgroundImage using setBackground()
You can set a background-image with programmatically as well.
BackgroundSize backgroundSize = new BackgroundSize(900,
700,
true,
true,
true,
false);
BackgroundImage image = new BackgroundImage(new Image("image/background.png"),
BackgroundRepeat.NO_REPEAT,
BackgroundRepeat.NO_REPEAT,
BackgroundPosition.CENTER,
backgroundSize);
HBoxName.setBackground(new Background(image));
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 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:
in javafx, does anyone know the css selector for the color of the "default" button in an alert? The "Yes" button in light blue here:
The base color for a default button is set to the looked-up color -fx-default-button:
.button:default {
-fx-base: -fx-default-button;
}
which defaults to the light blue in your screenshot:
.root {
/* ... */
-fx-default-button: #ABD8ED;
/* ... */
}
(Code snippets from modena.css source.)
So you can just change the value of -fx-default-button on your root element.