Inject an HTML into a Flow Compoment

Hi,

What is the proper way do display a scrollable HTML text in Vaadin 10?
I tried

       content.getElement().setProperty("innerHTML", text);

where content was declared as Label or Span and the texts were longer versions of "this <br>is</br> a test "
The results were inconsistent - sometimes the text was not visible and sometimes it was. Perhaps setProperty(“innerHTML”, text) is a too low level operation and it is messing up the markup. So what would be a suggested way to display a text with some of the words bold or colored, and the text is generated during runtime?

Thanks!

If you want to have control to this in your Java code, I would recommend to put the text there as Label and set some class name to the Label with API in Flow and add the color etc. themeing in CSS.

It’s more verbose, but AFAIK you can also construct the HTML from pieces, e.g.

Component textNode = new Text();
element.appendChild(textNode);
element.appendChild(ElementFactory.createStrong("bold text"));

and so on.

Just making sure, in your example you use <br> elements which is a line break element (and is self-closing so you don’t need a </br> element), that your text isn’t clipped by the parent element/layout? Did you mean to use the <b> element instead to make the text bold?

Thank you for the reply. Yes I used <b>, not <b>. I will try the solution you suggested.
Is setProperty("innerHTML", html) also a suggested way to display a run-time generated HTML? If yes, perhaps there is a code snippet I could use as an example.

Also, following your example, does this look like the correct approach:

	element.appendChild(ElementFactory.createStrong("bold text"));
	element.appendChild((new Span("plain text")).getElement());
	element.appendChild(ElementFactory.createStrong("bold text again"));
	element.appendChild((new Span("plain text again")).getElement());
	....

Yeah, I would expect that to work. I have no idea why innerHTML doesn’t work, though.

Please make sure to read the following too. It explains an edge case using innerHtml in Vaadin: https://github.com/vaadin/flow/issues/4644

Also, depending what you are trying to accomplish, one solution could be to use HTML component of Flow.

setProperty("innerHTML", text) has some issues.

I have a class for this:

package com.storedobject.vaadin;

import com.vaadin.flow.component.Composite;
import com.vaadin.flow.component.HasText;
import com.vaadin.flow.component.Html;
import com.vaadin.flow.component.html.Span;

/**
 * A component to show HTML text.
 *
 * @author Syam
 */
public class StyledText extends Composite<Span> implements HasText {

    private Span content = new Span();
    private String text;

    public StyledText(String htmlText) {
        setText(htmlText);
    }

    @Override
    protected Span initContent() {
        return content;
    }

    @Override
    public void setText(String htmlText) {
        if(htmlText == null) {
            htmlText = "";
        }
        if(htmlText.equals(text)) {
            return;
        }
        text = htmlText;
        content.removeAll();
        content.add(new Html("<span>" + htmlText + "</span>"));
    }

    @Override
    public String getText() {
        return text;
    }
}