Tutorial :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?


Solution: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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »