Search code examples
javafxpopovercontrolsfx

ControlsFX PopOver - adding style classes cuts off the borders

I've been using The PopOver node of controlsFX so i wanted to change the background color of the control so i've changed the background color of my content node but that left the arrow and the header uncolored here (The white boxes are just cards and are meant to be white) so i tried this approach that i've found here

globalScopingPopOver.show(owner);

((Parent) globalScopingPopOver.getSkin().getNode()).getStylesheets()
        .remove(getClass().getResource("/css/myCustomPopOver.css").toExternalForm());

((Parent) globalScopingPopOver.getSkin().getNode()).getStylesheets()
        .add(getClass().getResource("/css/myCustomPopOver.css").toExternalForm());

where myCustomPopOver.css contains:

.popover > .border {
    -fx-fill: rgb(0,0,0);
}

.popover > .header {
    -fx-fill: rgb(0,0,0);
}

which left me with this which has two obvious problems, the first is that the right border is trimmed and the second is that the arrow is hidden under the footer bar.

Detaching the popover by dragging fixes the right border problem, yet detaching and reattaching it by code sends us back to where we started removing the effects of the CSS stylesheet:

globalScopingPopOver.detach();
globalScopingPopOver.setDetached(false);

So any help why this's happening and how to fix it?

Thank you!

Solution

  • Calling show(owner) a second time after adding the stylesheet did the trick for me.