How do I use jQueryUI's ui-states with JSF2's h:messages?

Question

It seems like it should be very simple to specify that the h:messages generated by JSF should be styled using jQueryUI's nice ui-states. But sadly I can't make it fit. It seems that the jQueryUI states require several elements (div,div,p,span) in order to make it work.

So taking inspiration directly from the jQueryUI theme demo page:

<!-- Highlight / Error --> 
            <h2 class="demoHeaders">Highlight / Error</h2> 
            <div class="ui-widget"> 
                <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
                    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> 
                    <strong>Hey!</strong> Sample ui-state-highlight style.</p> 
                </div> 
            </div> 
            <br/> 
            <div class="ui-widget"> 
                <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
                    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
                    <strong>Alert:</strong> Sample ui-state-error style.</p> 
                </div> 
            </div>

and trying to jam the css class details into my h:message as best I can:

        <div class="ui-widget">
            <h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert" infoClass="ui-state-highlight ui-corner-all ui-icon-info"/>
        </div>

I don't get the icon or sufficient padding etc but the colours make it through. So, the styles are being applied but they aren't working as intended.

Any idea how I can make this work?

Answer 1

On that element, you need a class that gives display: block; to get the position characteristics you want, like this:

<div class="ui-widget">
  <h:messages globalOnly="true" errorClass="ui-state-error ui-corner-all ui-icon-alert block" infoClass="ui-state-highlight ui-corner-all ui-icon-info block"/>
</div>

CSS:

.block { display: block; }

Also if you're interested, here's a listing of all the classes jQuery UI uses for CSS and what they mean.