JavaFX FlowPane Autosize

Question

The problem I'm having is that the FlowPane is leaving a lot of excess space, it could possibly be the Popup, although I think the popup size is the content size.

For the sake of debugging I've wrapped the text in a BorderPane to show the bounds of the text.

The component I'm focusing on is the error popup.

CSS

.warning-popup {
    -fx-padding: 10px;
    -fx-hgap: 10px;
    -fx-vgap: 10px;
    -fx-background-color: #704745;
    -fx-border-color: #C8C8C8;
    -fx-background-radius: 2px;
    -fx-border-radius: 2px;
}


.warning-popup .text {
    -fx-fill: #000000;
}

Java Code

public static void showWarningPopup(Node owner, String message, double screenX, double screenY) {
    // create message text
    Text text = new Text(message);
    text.getStyleClass().add("text");
    // wrap text in container
    Pane textContainer = new BorderPane(text);
    textContainer.setStyle("-fx-background-color: orange;");
    // create error image
    ImageView image = new ImageView("/resources/error-14.png");
    image.getStyleClass().add("image-view");
    // create content
    FlowPane content = new FlowPane(image, textContainer);
    content.getStyleClass().add("warning-popup");
    content.autosize();
    // create and show the popup
    Popup popup = new Popup();
    popup.setHideOnEscape(true);
    popup.setAutoHide(true);
    popup.setAutoFix(true);
    popup.getContent().add(content);
    popup.show(owner, screenX, screenY);
}

Thank you for any help in advance :)

Answer 1

Background

The issue you are facing is because of the default WrapLength of FlowPane, which is set at 400. This property also sets the width of the FlowPane to 400.

From the docs:

FlowPane's prefWrapLength property establishes it's preferred width (for horizontal) or preferred height (for vertical).

Solution

You can decrease the wrapLength to the desired value by using

flowPane.setPrefWrapLength(YOUR_VALUE);

Answer 2

In addition to @ItachiUchiha's answer, you may get rid of all panes and use Label for your simple use case:

public static void showWarningPopup( Node owner, String message, double screenX, double screenY )
{
    // create error image
    ImageView image = new ImageView( "/resources/error-14.png" );
    image.getStyleClass().add( "image-view" );

    // create content
    Label label = new Label( message, image );
    label.setBackground(
            new Background(
                    new BackgroundFill(
                            Color.ORANGE,
                            new CornerRadii( 10 ),
                            new Insets( -10 )
                    )
            )
    );

    // create and show the popup
    Popup popup = new Popup();
    popup.setHideOnEscape( true );
    popup.setAutoHide( true );
    popup.setAutoFix( true );
    popup.getContent().add( label );
    popup.show( owner, screenX, screenY );
}

You can prefer using css style classes instead of code based styling, of course.