How to readjust text that is inside a Textflow?

Question

I have a problem, where, when trying to readjust the screen, the text that is inside a TextFlow, goes off the screen, and it’s not set down.

public SwingFXPanel(ServicosJson json) {
    this.json = json;
    this.cliente = cliente;        
    this.msgs = new ArrayList<>();               
    this.chatBox = new VBox();                            
    this.scroll = new ScrollPane();                
    this.lista = new ArrayList<>();
    this.scroll.setAccessibleRole(javafx.scene.AccessibleRole.PARENT);
    this.scroll.setHbarPolicy(javafx.scene.control.ScrollPane.ScrollBarPolicy.NEVER);
    this.scroll.setLayoutX(0);
    this.scroll.setLayoutY(0);
    this.scroll.setPrefHeight(735);
    this.scroll.setPrefWidth(519);        
    this.scroll.setVvalue(1.0);        
    this.scroll.setFitToHeight(true);
    this.scroll.setFitToWidth(true);         
    this.scene = new Scene(this.scroll);
    this.scene.getStylesheets().add(getClass().getResource("/br/com/teste/commerce/chat/css/style.css").toString());    
    this.chatBox.heightProperty().addListener(observable -> scroll.setVvalue(1D));
    thread = new Thread(new Runnable() {
        @Override
        public void run() {
            //
        }            
    });        
}

public void addMessage(String mensagem, String origem, boolean mostrandoAtalhos) {
        mensagem = mensagem.replace("u000A", "\n");
        Text text=new Text(mensagem);
        text.setFill(Color.BLACK);        
        text.getStyleClass().add("message");
        TextFlow tempFlow=new TextFlow();                     

        if(origem.equals("0")){            
            Text txtName=new Text();
            txtName.getStyleClass().add("txtName");
            tempFlow.getChildren().add(txtName);
        }
        if (mostrandoAtalhos) {
            text.setWrappingWidth(20);
            tempFlow.setMaxWidth(300);        
        } else {
            text.setWrappingWidth(80);
            tempFlow.setMaxWidth(650);        
        }
        tempFlow.getChildren().add(text);                
        TextFlow flow=new TextFlow(tempFlow);
        HBox hbox=new HBox(20);               
        Circle img =new Circle(32,32,16);

        img.getStyleClass().add("imageView");
        if (origem.equals("0")) {
            tempFlow.getStyleClass().add("tempFlowFlipped");
            flow.getStyleClass().add("textFlowFlipped");
            chatBox.setAlignment(Pos.TOP_LEFT);
            hbox.setAlignment(Pos.CENTER_LEFT);
            hbox.getChildren().add(img);
            hbox.getChildren().add(flow);
        }else{
            text.setFill(Color.BLACK);
            tempFlow.getStyleClass().add("tempFlow");
            flow.getStyleClass().add("textFlow");
            hbox.setAlignment(Pos.BOTTOM_RIGHT);
            hbox.getChildren().add(flow);
            hbox.getChildren().add(img);
        //}       
        }  
        hbox.getStyleClass().add("hbox");
        Platform.setImplicitExit(false);
        Platform.runLater(() -> {
            chatBox.getChildren().addAll(hbox);                                    
        });      
    }

Answer 1

This bug happened because of the multiple internal nodes you have. Although I do not know what kind of panel you are using for chatBox I did some tests using it as Hbox and managed to reproduce the problem. It was not clear to me the type of screen you want to build, but resize will work if it is like this:

StringBuilder textoLongo = new StringBuilder();
textoLongo.append("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et ligula et dui efficitur gravida.");
textoLongo.append("Etiam pretium condimentum quam sit amet faucibus. Suspendisse potenti. Donec nulla urna, pulvinar id ligula consectetur,");
textoLongo.append("pulvinar congue turpis. Donec convallis ultricies erat, ac bibendum augue tincidunt ut.");
textoLongo.append("Integer laoreet ipsum sed scelerisque aliquam. Nunc pulvinar urna nec tristique pulvinar.");
textoLongo.append("Praesent pretium tortor viverra tortor condimentum venenatis. Fusce a ipsum sem. Mauris malesuada venenatis ex,");
textoLongo.append("eu vestibulum est iaculis nec. Morbi finibus ligula vel commodo finibus. Ut gravida turpis id nisi sodales viverra.");
textoLongo.append("Donec lobortis ligula eu metus finibus congue. Morbi hendrerit, tellus non vestibulum ullamcorper,");
textoLongo.append("felis tortor facilisis orci, quis tempor justo nisl vitae magna");

Text text = new Text(textoLongo.toString());
TextFlow tf = new TextFlow(text);
tf.setPadding(new Insets(20.0,40.0,20.0,40.0));
chatBox = new HBox(tf);

Javafx still leaves a bit to be desired in very complex scenes so you should try to build your layout as streamlined as possible (It’s even better for performance)

May I suggest that you use a Borderpane as the main (if you give more details of the problem I change with other suggestions). Another interesting thing about your code are these css classes:

img.getStyleClass().add("imageView"); // Já existe .image-view
hbox.getStyleClass().add("hbox"); // Já existe

Edit:

Below an implementation of a simple chat window:

// Chat
text = new Text("Bem vindo ao chat");
TextFlow tf = new TextFlow(text);
tf.setPadding(new Insets(20.0,40.0,20.0,40.0));

// Scroll pane apenas vertical
ScrollPane scroll = new ScrollPane(tf); 
scroll.setFitToWidth(true);

// Opções do chat e botão de envio
TextField chat = new TextField();
Button enviar = new Button("Enviar");
HBox opcoes = new HBox(5);
chat.setPrefWidth(250.0);
opcoes.getChildren().setAll(chat, enviar);
opcoes.setPadding(new Insets(20.0,40.0,20.0,40.0));

// Painel principal
BorderPane root = new BorderPane();
root.setCenter(scroll);
root.setBottom(opcoes);

enviar.setOnAction((ActionEvent) -> {
    String textoAtual = text.getText();
    String novoTexto = chat.getText();
    text.setText(textoAtual + "\n\n" + novoTexto);
});

Answer 2

Actually the problem was that there were two TextFlow inside the other, the first contained a maxWidth and the other not. I removed the second TextFlow and it worked.