Java Fx 8 Dialog rounded corners

Question

I am attempting to use the new Dialog classes in Java Fx 8 for a modal dialog which has rounded corners and sits above the main stage when shown.

I have the following code:

Dialog dialog = new Dialog<>();

Stage dialogStage = (Stage) dialog.getDialogPane().getScene().getWindow();
dialogStage.initStyle(StageStyle.TRANSPARENT);

DialogPane dialogPane = dialog.getDialogPane();
dialogPane.setStyle("-fx-background-radius: 15 15 15 15;fx-background-color:
transparent;-fx-border-radius: 0 0 0 0;");
dialogPane.getStylesheets().add(getClass().getResource("dialogstyle.css").toExternalForm());
dialogPane.getStyleClass().add("myDialog");

dialog.setTitle("Dialog Example");
dialog.setHeaderText("This is a custom dialog.");
dialog.setResizable(true);

Label label1 = new Label("Name: ");
Label label2 = new Label("Phone: ");
TextField text1 = new TextField();
TextField text2 = new TextField();

GridPane grid = new GridPane();
grid.add(label1, 1, 1);
grid.add(text1, 2, 1);
grid.add(label2, 1, 2);
grid.add(text2, 2, 2);
dialog.getDialogPane().setContent(grid);

ButtonType buttonTypeOk = new ButtonType("Okay", ButtonData.OK_DONE);
dialog.getDialogPane().getButtonTypes().add(buttonTypeOk);

plus code to hide and show the dialog etc.

which I have combined with the following css stylesheet:

.myDialog{
    -fx-background-color:rgba(0, 0, 0, 0);
    -fx-background-radius: 15 15 0 0;
    -fx-background-insets: 0, 1, 2;
    -fx-border-radius: 0 0 0 0;
}

.myDialog > *.button-bar > *.container{
    -fx-background-color: #a9e200;
    -fx-background-radius: 0 0 15 15;
}

.myDialog > *.label.content{
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.myDialog:header *.header-panel{
    -fx-background-color: #a59c31;
    -fx-background-radius: 15 15 0 0;
}

.myDialog:header *.header-panel *.label{
    -fx-font-size: 18px;
    -fx-font-style: italic;
    -fx-fill: #292929;
}

This is based on the following post.

This gets close, but the resulting dialog has white hard edges, which look to be part of the scene.

Adding

dialogPane.getScene().setFill(Color.TRANSPARENT);

works, but makes the content area containing the textboxes transparent as well.

Can anyone advise as to what i am missing to get this to work?

Answer 1

Just in case someone still needs to do that, I managed to have rounded corners on a JFXDialog by doing so : (as well as adding background radius tpo the root element)

.jfx-dialog-overlay-pane > StackPane{
-fx-background-radius: 20;
-fx-background-color: white; 
}

I haven't tried wth a Dialog, but I'm guessing the solution would be pretty much the same.

Answer 2

This works for me.

DialogPane dialogPane = new DialogPane();
dialogPane.getScene().setFill(null);
    

Then in your css file

.dialog-pane {
    -fx-background-radius: 15px;
    -fx-border-radius: 15px;
}