p:message rendered for input field without messages

[Hamsterbau]

Hi,

i have the following problem (perhaps a bug?): h:message for an input field will only be rendered, if no FacesMessage exists under the input field ID. On the other hand if i use p:message, an empty DIV will be generated, also if no FacesMessage exists.

In combination with Ultima-Theme this leads to a problem, because this DIV with class .ui-message is configured with min-height: 20px;. So also with no FacesMessage (f. e. for an error message) the next input field below will be shown 24px lower. This leads to very ugly FORMs if there are input fields with:

• No p:message attached
• Using h:message (but at least this really makes no sense)
• Input field with p:message not aligned below (f. e. at the right side or just as tooltip)

Problem-Code-Example

Code: Select all

<p:panelGrid columns="1">
    <h:panelGroup styleClass="md-inputfield">
        <p:password id="myValidatedInput" value="#{bean.input1}" required="true"/>
        <h:outputLabel for="myValidatedInput" value="#{msg.validated_input}"/>
        <p:message for="myValidatedInput"/>
    </h:panelGroup>

    <!-- Space = margin + message-min-height -->
    <h:panelGroup styleClass="md-inputfield">
        <p:password id="myOptionalInput" value="#{bean.input2}"/>
        <h:outputLabel for="myOptionalInput" value="#{msg.optional_input}"/>
    </h:panelGroup>

    <!-- Space = only margin -->
    <h:panelGroup styleClass="md-inputfield">
        <p:password id="myValidatedInput2" value="#{bean.input3}"/>
        <h:outputLabel for="myValidatedInput2" value="#{msg.validated_input}" 
            validator="myValidator"/>
        <p:message for="myValidatedInput2"/>
    </h:panelGroup>
                            
...

Is it possible this will be fixed in next release for primefaces?
Or is it really needed to have an empty DIV just wih no messages available?

Wbr,

Daniel

[tandraschko]

a empty div is required, otherwise the component is not updateable.
JSF ajax engine works by replacing DOM elements. If you do a ajax update=myId but no DOM element with this exists, nothing will be displayed.

[Hamsterbau]

In case of h:message it works without it, perhaps by using conditional updates
But do you have a tip how i can overcome the ugly forms?

Thanks,

Daniel

[tandraschko]

It should only work when updating one of the parent(s) but if you would update the message component directly, i shoudln't work.

I currently don't have time to check your form layout sorry.

[asesovici]

Hi there,

I have the same problem with the empty div that has the unfortunate min-height in Ultima theme. Can this be solved somehow?

Maybe to have a different style class for the generated p:message div?

/alexandra

[LarsD]

Hi.

I'm facing a similar problem I used the following solution:
- place the p:message in a panel grid (first or last row)
- use css to style the row like this:

Code: Select all

.panelgridStyleClass tbody>tr:first-child {
	height: 0px;
}

That will render the row where the p:message element is placed in 0px heigth. If a message occurs the message will be rendered normally.


kind regards
Lars