Why isn't inline styling not working as expected?

Ask the community
,
1

I’m iterating through an array of objects in a collection and displaying their properties in a textbox. I start with an empty string and concat html elements and content to the string, using inline styling as needed. Here’s the code:

function showReplies ($item, itemData, index) {
 if(itemData.replies){
 const repliesTextBox = $item("#text13");
 let repliesHTML = "<div style='font-size:15px; line-height:1.5; font-weight:normal;'>";

        itemData.replies.forEach((reply) => {
            repliesHTML = repliesHTML.concat("<div style='margin-bottom:1%;'>");
            repliesHTML = repliesHTML.concat(reply.name);
            repliesHTML = repliesHTML.concat("</div>");
            repliesHTML = repliesHTML.concat("<div style='white-space:pre-line; margin-left:3%; font-size:14px;'>");
            repliesHTML = repliesHTML.concat(reply.text);
            repliesHTML = repliesHTML.concat("</div>");
            repliesHTML = repliesHTML.concat("<br>");
        });

        repliesHTML = repliesHTML.concat("</div>");
        repliesTextBox.html = repliesHTML;
    }
}

The styling works except the white-space property, which doesn’t honor the line-breaks.

What am I missing here? :thinking:

Tested on Firefox v81 and Safari v14.

2

The supported HTML is quite limited. As you can see in the docs, the

tag is not supported. That might be the cause of your problem. Try the or

tags instead.