I want to customize the appearance of a control PopOver
in JavaFX
. I have a button that when I press it the PopOver
. Here is a working example:
package pruebapopover;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import org.controlsfx.control.PopOver;
public class PruebaPopOver extends Application {
@Override
public void start(Stage primaryStage) {
PopOver popover = new PopOver();
TextField campo = new TextField();
popover.setContentNode(campo);
Button btn = new Button();
btn.setText("Abrir PopOver");
btn.setOnAction((ActionEvent event) -> {
popover.show(btn);
((Parent) popover.getSkin().getNode()).getStylesheets()
.add(getClass().getResource("PopOver.css").toExternalForm());
});
StackPane root = new StackPane();
root.getChildren().add(btn);
Scene scene = new Scene(root, 300, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
And the PopOver.css:
.popover {
-fx-background-color: rgba(255,0,0, 0.1); /* rojo semitransparente */
}
.popover > .content {
-fx-padding: 10;
-fx-background-color: transparent;
}
The result is:
How do I remove the white background? Why isn't it semi-transparent? How do I paint the arrow red?
The visual aspect of the
PopOver
one we see on the screen is onePath
to which the style class has been addedborder
:Therefore, in the file we
.CSS
replace.popover {-fx-background-color: rgba (255,0,0,0.1); }
with: