JavaFX Text-Area remove borders

Question

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).

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?

Answer 1

Here is a similar example to Sai's but uses a standard stage.

It uses a UTILITY style, but you could use a different style if you prefer.

Basically, if you don't want the additional styling and functionality of the alerts and dialogs (and you don't seem to with at least the example you have given), then you can just use a standard stage to display your content rather than the dialog classes provided in the javafx.control package.

The alert.css file referenced in the example is the CSS from your question.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.input.*;
import javafx.stage.Modality;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class TextAreaUtility extends Application {

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

    @Override
    public void start(Stage stage) {
        Button showAlert = new Button("Show Alert");
        showAlert.setOnAction(this::showAlert);

        stage.setScene(new Scene(showAlert));
        stage.show();
    }

    private void showAlert(ActionEvent e) {
        TextArea textArea = new TextArea("");
        textArea.setWrapText(true);
        textArea.setEditable(false);

        Scene scene = new Scene(textArea, 750, 800);
        scene.getStylesheets().add(
                TextAreaUtility.class.getResource(
                        "alert.css"
                ).toExternalForm()
        );

        Stage utility = new Stage(StageStyle.UTILITY);
        utility.initOwner(((Button) e.getSource()).getScene().getWindow());
        utility.initModality(Modality.APPLICATION_MODAL);
        utility.setTitle("Alert Title");
        utility.addEventFilter(KeyEvent.KEY_PRESSED, event -> {
            if (event.getCode() == KeyCode.ESCAPE) {
                utility.hide();
            }
        });
        utility.setResizable(true);
        utility.setScene(scene);
        utility.showAndWait();
    }
}

Debugging nodes and styles info

If you want to see the nodes and style names in your scene graph and you aren't using a tool like ScenicView, a quick debug function is:

private void logChildren(Node n, int lvl) {
    for (int i = 0; i < lvl; i++) {
        System.out.print("  ");
    }
    System.out.println(n + ", " + n.getLayoutBounds());

    if (n instanceof Parent) {
        for (Node c: ((Parent) n).getChildrenUnmodifiable()) {
            logChildren(c, lvl+1);
        }
    }
}

Which you can attach to run when the window is displayed:

w.setOnShown(se -> logChildren(alert.getDialogPane().getScene().getRoot(), 0));

When you run this on a standard dialog you will see quite a few nodes in the scene graph with attached styles that you can find defined in the modena.css file within the JavaFX SDK. You will also see that some of the bounding boxes for the layout that are not related to your text area have width and height.

Those dialog styles by default have padding attached to them, which is why you are seeing padding around your TextArea. The padding is not in the text area but the content regions containing it within the dialog. To get rid of it, you need to set the padding in your custom CSS to override the default. I don't have the CSS for that, it is difficult to create sometimes and overriding default padding is probably best avoided when possible.

Answer 2

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;
}