Set text alignment inside the TextArea using css is not working

Question

I am trying to set the text alignment inside a textArea for center, left, and right in the controllers but none is working.
My current code is simple, for the center method I use this inside the method:

textArea.setStyle("-fx-text-alignment: center");

But this changes nothing.
Is there any better way to solve this issue?

https://stackoverflow.com/questions/12831101/format-text-in-a-textarea ? — CertainPerformance, Dec 27 '18 at 07:23
textArea.setStyle("-fx-text-alignment: center !important"); use this once. — Arshiya Khanam, Dec 27 '18 at 07:24
Because I need to change the text alignment inside the textarea when the user clicks a button. Is there any better approach? — , Dec 27 '18 at 07:29
Possible duplicate of [Align content of a TextArea in JavaFX](https://stackoverflow.com/questions/40341331/align-content-of-a-textarea-in-javafx) — Pagbo, Dec 27 '18 at 10:39
I've read these ones before and they are different, one for labels and one for doing through external css file. — , Dec 27 '18 at 11:31

score 1 · Accepted Answer · answered Dec 27 '18 at 13:49

I've read these ones before and they are different, one for labels and one for doing through external css file

Actually "doing through external css file" is the recommended way to do this. Cleaner, more readable and better applicative maintenance.

But if for some unknown reasons (as you did not mention them), you want to do it by code only, you can. Here is a little MCVE which show you how.

public class TextAlign extends Application {

    private TextArea textArea;

    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();

        // The toggle button for alignment
        HBox hbToggleContainer = new HBox(10.0);
        ToggleButton tbAlignLeft = new ToggleButton("Align to left");
        ToggleButton tbAlignCenter = new ToggleButton("Align to center");
        ToggleButton tbAlignRight = new ToggleButton("Align to right");
        ToggleGroup tg = new ToggleGroup();
        tg.getToggles().addAll(tbAlignLeft, tbAlignCenter, tbAlignRight);
        hbToggleContainer.getChildren().addAll(tbAlignLeft, tbAlignCenter, tbAlignRight);
        hbToggleContainer.setAlignment(Pos.CENTER);
        root.setTop(hbToggleContainer);

        textArea = new TextArea("Hello world. Lorem ipsum blah blah\n\nMerry Christmas.");
        root.setCenter(textArea);

        tbAlignLeft.selectedProperty().addListener((obs, oldValue, newValue)-> {
            Node lText = textArea.lookup(".text");
            lText.setStyle("-fx-text-alignment: left;");
        });
        tbAlignCenter.selectedProperty().addListener((obs, oldValue, newValue)-> {
            Node lText = textArea.lookup(".text");
            lText.setStyle("-fx-text-alignment: center;");
        }); 
        tbAlignRight.selectedProperty().addListener((obs, oldValue, newValue)-> {
            Node lText = textArea.lookup(".text");
            lText.setStyle("-fx-text-alignment: right;");
        }); 

        Scene scene = new Scene(root);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

The point here is the lookup method which enables you to retrieve the component which understand the -fx-text-alignment property.

To my mind, this solution is clearly less clean than this answer. (the one I linked into the comment)

Set text alignment inside the TextArea using css is not working

1 Answers1