Common Text Widget issue in Mendix 6

1
Hi, I just migrated from 5.21.4 to 6.6.0. I have a problem with the common text widget. The behavior is different. Here is an example of a text entered in a text area and stored in a specific field: Here is my line number 1 Here is my line number 2 Here is my line number 3 If I use this field in the text widget, here is what is displayed on the page with Mendix 5.21.4: Here is my line number 1 Here is my line number 2 Here is my line number 3 Here is how it looks with Mendix 6.6.0: Here is my line number 1 Here is my line number 2 Here is my line number 3 I use a lot of those as I have a lot of customized content in my app. I cannot push that to production... Anyone can help please?
asked
3 answers
2

You can set it to paragraph:

From https://world.mendix.com/display/refguide6/Text

Text: The text will be rendered inline with the previous/next texts on a page (<span> tag in HTML)
Paragraph: The text will be rendered as a separate paragraph (<p> tag in HTML)
answered
2

This is indeed a bug. If the text contained parameters, line breaks were ignored. This will be fixed in version 6.8.0.

answered
0

This is probably a bug - please file a support ticket.

The Mendix widget code changed between 5.21.4 and 6.6 and is missing the piece that converts newline characters to </br>. I'm not sure why that would have been removed, but perhaps (since it involved removing a line of code), it was intentional.

A few ideas for a workaround:

  • Use the text area widget, with Editable set to 'never'. That will render text as you expect.
  • Use an HTMLSnippet to add some custom JS which will replace the newline character with </br>

Here's some sample code you can try - I haven't tested cross-browser support but it works in Chrome and Edge.

String.prototype.replaceAll = function(search, replace)
{
    //if replace is not sent, return original string otherwise it will
    //replace search string with 'undefined'.
    if (replace === undefined) {
        return this.toString();
    }

    return this.replace(new RegExp('[' + search + ']', 'g'), replace);
};

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

function fixNewLines() {
    dojo.query(".mx-text").forEach(function(t) {
        if(t.innerHTML.includes("\n")) {
            t.innerHTML = t.innerHTML.replaceAll("\n","</br>");
        }
    });
}
var observer = new MutationObserver(dojo.hitch(this, fixNewLines));

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(this.domNode.parentNode, {
    subtree: true,
    childList: true,
    attributes: false,
    characterData: false,
    attributeOldValue: false,
    characterDataOldValue: false
});

dojo.hitch(this,fixNewLines)();
answered