Orbeon changed behavior for xforms:alert / xforms:h3lp

[Stackoverflow disallows the word help in the title. Hence the h3lp]

We are in the proces of moving our code from Orbeon 3.9 to Orbeon 4.x. One of the many things that changed is the behavior for display of xforms:alert and xforms:help. Example code:

<xforms:input ref="@code">
    <xforms:alert ref="$resources/required-field"/>
    <xforms:help ref="$helptext"/>
</xforms:input>

In Orbeon 3.9 the alert is displayed as a red img with a white exclamation mark that has the text as tooltip, only if the binding fails. The help is displayed as a blue-ish image with a question that activated a tiny pseudo window containing the (potentially large) help text.

In Orbeon 4.7 the alert text is displayed as-is, no image and no condition based on binding. This interferes with a carefully designed interface as it takes up a lot more space. The help text is not displayed at all because .xforms-help has display: none;. Overriding that doesn't work because the text would then just be displayed inline.

I could not find documentation for these changes. Does anyone know the rationale and how to make "alert" and "help" useful yet again?

Solution

There are two changes with Orbeon Forms 4.x which might be relevant to this:

The HTML layout of elements has changed a bit. This means existing CSS might have to be adapted. You can check this by comparing the HTML produced by 3.9 vs. 4.x for a given page. With 4.x, all form elements, for example, are wrapped within a <span> or <div> element.
Form Runner uses Twitter Bootstrap as a CSS library. But the Bootstrap CSS files are also included for non-Form Runner pages.

This said, "red icon" alerts should still work, see for example the good old Espresso Order or Bookcast demos.

If you see alerts inline and unconditionally, it means that somehow the proper CSS doesn't apply, either because of the HTML layout change mentioned above, or because some CSS files are missing.