[FIXED] JavaFX Text-Area remove borders

Issue

I am using an JavaFX Alert with a text area on it.

The problem I have is that the text area does not use the full space of the Alert, as well as having white (borders).

src="https://i.stack.imgur.com/mebcP.png" alt="alert with text area" />

My code:

TextArea area = new TextArea("");
area.setWrapText(true);
area.setEditable(false);
area.getStylesheets().add(getClass().getResource("/model/app.css").toExternalForm());
Alert alert = new Alert(AlertType.NONE);
alert.getDialogPane().setPrefWidth(750);
alert.getDialogPane().setPrefHeight(800);
alert.getDialogPane().setContent(area);
formatDialog(alert.getDialogPane());
alert.setTitle("Lizenz Info");
Window w = alert.getDialogPane().getScene().getWindow();
w.setOnCloseRequest(e -> {
    alert.hide();
});
w.addEventFilter(KeyEvent.KEY_PRESSED, new EventHandler<KeyEvent>() {
    @Override
    public void handle(KeyEvent event) {
        if (event.getCode() == KeyCode.ESCAPE) {
            w.hide();
        }
    }
});
alert.setResizable(true);
alert.showAndWait();

My corresponding css sheet:

.text-area .content {
    -fx-background-color: #4c4c4c;  
}

.text-area {
    -fx-text-fill: #ff8800;
    -fx-font-size: 15.0px;
}

.text-area .scroll-pane {
    -fx-background-color: #4c4c4c;  
}

.text-area .scroll-pane .viewport {
    -fx-background-color: #4c4c4c;  
}

.text-area .scroll-pane .content {
    -fx-background-color: #4c4c4c;  
}

.viewport and .content on .scrollpane did not have any effect whatsoever.

I want the white borders either to be gone, or have the same color as the background, also to use the full space of the dialog. Can someone help?

Solution

As @jewelsea suggested, I think Alert is not the right choice here. Your desired layout can be acheived by using Dialog (as in below code).

Dialog<String> dialog = new Dialog<>();
dialog.setTitle("Lizenz Info");
dialog.getDialogPane().getButtonTypes().addAll(ButtonType.OK);
dialog.getDialogPane().setContent(area);
dialog.setResizable(true);
dialog.showAndWait();

Having said that, you can fix the existing issues as below:

Remove white space around text area: You can remove the white space by setting the padding of TextArea to 0. Include the below code in the css file.

.text-area{
  -fx-padding:0px;
}

Changing the white space background : The .text-area and .content styleclasses are on same node. So instead of declaring with space between them

.text-area .content {
    -fx-background-color: #4c4c4c;
}

you have to declare without the space between the styleclasses (in below code)

.text-area.content {
    -fx-background-color: #4c4c4c;
}

Answered By - Sai Dandem
Answer Checked By - Robin (JavaFixing Admin)