HTML help text rendered incorrectly on Android

[donalmurtagh]

Here's a plunker example of a form that contains some HTML help fields. On a desktop browser, everything works as expected but on some mobile browsers, some HTML fields are not rendered.

The fields in the form are

[
    "name", 
    {
        type: "help",
        helpvalue: "first"
    }, {
        type: "help",
        helpvalue: "second <h3>heading</h3>"
    }, {
        type: "help",
        helpvalue: "third <b>bold</b>"
    }
];

Heres' a screenshot of how the form is rendered on this Android browser.

Notice that the first and third help fields are rendered correctly, but the second one with content

helpvalue: "second <h3>heading</h3>"

is omitted. When the form is rendered on a desktop browser all 3 fields are rendered correctly.

[donalmurtagh]

I can workaround this problem by wrapping everything in a <div> e.g. change

helpvalue: "second <h3>heading</h3>"

to

helpvalue: "<div>second <h3>heading</h3></div>"

Perhaps the problem with the original markup is that it's invalid, i.e. a block element is nested within an inline element, but it's strange that the problem should manifest itself only on mobile browsers.

At the very least, I think the docs should be updated to explain what kind of markup is considered valid.

[davidlgj]

Hi @donalmurtagh, I'm not sure that I'm following what you mean by "the original markup is that it's invalid". Sure invalid markup can do strange things and behave differently on different browsers, but I don't see any invalid markup in your plunkr... what am I missing?

Anyway the helpvalue template is very simple

<div class="helpvalue schema-form-helpvalue {{form.htmlClass}}" ng-bind-html="form.helpvalue"></div>

So any html that ng-bind-html likes should be fine!

[donalmurtagh]

If the helpvalue template was something like

<span class="helpvalue schema-form-helpvalue {{form.htmlClass}}" ng-bind-html="form.helpvalue"></span>

then a helpvalue of

helpvalue: "second <h3>heading</h3>"

would lead to invalid markup because you'd have a <h3> nested inside a <span>. But now that I know what the helpvalue template actually looks like, you can ignore that remark.

So I've no idea why this help field is not rendered correctly on the Android browser. Were you able to reproduce the problem?

[davidlgj]

My samsung stock browser has the issue, but not chrome on my Android. I haven't the faintest idea why though :)