PopOver JavaFX control released with ControlsFX 8.0.3

Hi,
Thx for the popOver editor but I’am facing some issues on showing it correctly.
The problem is that I can’t get The popOver to show correctly under my control !!

This is the program I’ve been working on, it’s just a custom layout:

Main.java

import com.minedun6.org.AnimatedField;
import com.minedun6.org.LabeledImage;
import com.minedun6.org.StyledImage;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.geometry.Rectangle2D;
import javafx.scene.Cursor;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.util.Duration;
import org.controlsfx.control.PopOver;
import org.controlsfx.glyphfont.FontAwesome;
import org.controlsfx.glyphfont.GlyphFont;
import org.controlsfx.glyphfont.GlyphFontRegistry;

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
/**
*
* @author Minedun6
*/
public class ApplicationLayout extends Application {

GlyphFont font = GlyphFontRegistry.font(“FontAwesome”);

private final Button btn_profile = new Button(“Profile”, font.fontColor(Color.WHITE).fontSize(20).create(FontAwesome.Glyph.USER_MD.toString()));
private final Button btn_settigns = new Button(“Paramètres”, font.fontColor(Color.WHITE).fontSize(20).create(FontAwesome.Glyph.GEARS.toString()));
private final Button btn_logou = new Button(“Paramètres”, font.fontColor(Color.WHITE).fontSize(20).create(FontAwesome.Glyph.SIGNOUT.toString()));

private final StyledImage user_image = new StyledImage(new ImageView(new Image(getClass().getResource(“Icon-user.png”).toExternalForm(), 50, 50, true, true, true)), 10);

private final Label main = new Label(“Menu Principal”);

private VBox ver_menu;
private HBox hor_menu;

private PopOver pop;

private final ImageView logo = new ImageView();
private final AnimatedField search_field = new AnimatedField();

private final Button btn_acceuil = new Button(“Acceuil”, font.fontSize(25).fontColor(Color.WHITE).create(FontAwesome.Glyph.HOME.toString()));
private final Button btn_clients = new Button(“Clients”, FontAwesome.Glyph.GROUP.create());
private final Button btn_actions = new Button(“Actions”, FontAwesome.Glyph.CODE.create());
private final Button btn_comptes = new Button(“Comptes Bancaires”, FontAwesome.Glyph.MONEY.create());
private final Button btn_settings = new Button(“Réglages”, FontAwesome.Glyph.GEAR.create());
private final Button btn_logout = new Button(“Déconnexion”, FontAwesome.Glyph.SIGNOUT.create());

@Override
public void start(Stage stage) throws Exception {
Rectangle2D rec = Screen.getPrimary().getVisualBounds();
BorderPane layout = new BorderPane();
Scene scene = new Scene(layout);
stage.setScene(scene);
scene.getStylesheets().add(getClass().getResource(“application-layout.css”).toExternalForm());
ver_menu = createVerticalMenu();
hor_menu = createHorizantalMenu();
setControls(stage);
createUserMenu();
stage.setMaximized(true);
layout.setTop(hor_menu);
layout.setLeft(ver_menu);
stage.setWidth(rec.getWidth());
stage.setHeight(rec.getHeight());
stage.setTitle(“Application Layout”);
stage.show();
}

public static void main(String[] args) {
launch(args);
}

private VBox createVerticalMenu() {
VBox vmenu = new VBox(10);
vmenu.getChildren().addAll(main, btn_acceuil, btn_comptes, btn_actions, btn_clients, btn_settings, btn_logout);
vmenu.getStyleClass().add(“vertical_menu”);
main.getStyleClass().add(“mainText”);
return vmenu;
}

private HBox createHorizantalMenu() {
HBox hmenu = new HBox(10);
hmenu.getChildren().addAll(logo, createBigSpace(), search_field, user_image, createBigSpace());
hmenu.setAlignment(Pos.CENTER);
hmenu.getStyleClass().add(“horizantal_menu”);
return hmenu;
}

private Node createBigSpace() {
HBox box = new HBox();
HBox.setHgrow(box, Priority.ALWAYS);
return box;
}

private Node createSmallSpace() {
HBox box = new HBox();
HBox.setHgrow(box, Priority.SOMETIMES);
return box;
}

private void setControls(Stage stage) {
btn_acceuil.setMaxWidth(Double.MAX_VALUE);
btn_actions.setMaxWidth(Double.MAX_VALUE);
btn_comptes.setMaxWidth(Double.MAX_VALUE);
btn_logout.setMaxWidth(Double.MAX_VALUE);
btn_settings.setMaxWidth(Double.MAX_VALUE);
btn_clients.setMaxWidth(Double.MAX_VALUE);
btn_profile.setMaxWidth(Double.MAX_VALUE);
btn_settigns.setMaxWidth(Double.MAX_VALUE);
btn_logou.setMaxWidth(Double.MAX_VALUE);
ver_menu.setPrefWidth(500);
ver_menu.prefWidthProperty().bind(stage.widthProperty().divide(7));
hor_menu.setPrefHeight(50);
hor_menu.prefHeightProperty().bind(stage.heightProperty().divide(12));
}

private void createUserMenu() {
VBox box = new VBox(10, btn_profile, btn_settigns, btn_logou);
pop = new PopOver(box);
pop.setHideOnEscape(true);
pop.setArrowLocation(PopOver.ArrowLocation.TOP_CENTER);
pop.setId(“popover”);
pop.setAutoFix(true);
user_image.setCursor(Cursor.HAND);
user_image.setOnMouseEntered((MouseEvent t) -> {
});
}

}

StyledImage.java

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package com.minedun6.org;

import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

/**
*
* @author Minedun6
*/
public class StyledImage extends StackPane {

private ImageView imageview = new ImageView();
private final Circle cadre = new Circle(25, Color.FIREBRICK);

public StyledImage(ImageView img, int radius) {
this.imageview = img;
cadre.setStrokeWidth(5);
getChildren().addAll(cadre, imageview);

}

public ImageView getView(){
return imageview;
}

}

application-layout.css

.horizantal_menu{
-fx-background-color: rgba(44, 62, 80,1.0);
-fx-opacity:0.9;
}

.vertical_menu{
-fx-background-color: rgba(44, 62, 80,1.0);
-fx-opacity:0.9;
-fx-alignment: BASELINE_LEFT;
}

.vertical_menu .button{
-fx-background-color: transparent, transparent, transparent, transparent;
-fx-padding: 10 5 10 5;
-fx-font-size:15;
-fx-font-weight: bold;
-fx-alignment: BASELINE_LEFT;
-fx-graphic-text-gap:5;
-fx-content-display:left;
-fx-opacity: 0.9;
-fx-text-fill: #ffffff;
-fx-font-family: “Tahoma”;
}

.vertical_menu .button:hover{
-fx-background-color: rgba(26, 188, 156,1.0);
-fx-cursor: hand;
-fx-opacity: 1;
-fx-alignment: BASELINE_CENTER;
}

.mainText{
-fx-font-size: 25;
-fx-font-weight: BOLD;
-fx-effect: innershadow(three-pass-box, #000, 1, .5, 1, 1);
-fx-text-fill: #ffffff;
-fx-underline: true;
}

.popover{
-fx-padding: 3 0 3 0;
-fx-opacity: 0.5;
}

.popover .button{
-fx-effect: innershadow(one-pass-box, #fff, 2, 0 ,1 ,1);
-fx-background-color: transparent;
-fx-padding: 5 3 5 3;
-fx-text-fill: #ccc;
-fx-font-size: 15;
-fx-content-display: left;
-fx-graphic-text-gap:5;
-fx-content-display:left;
}

.popover .button:hover{
-fx-background-color:#3333ff;
}

I hope it’s not too much of a code.

All I want is that the popover shows correctly under the styledimage.

and thx again

do you mind showing me what yu mean !!
A little example if yu may say !!
And thx ^^