3 Replies Latest reply on Nov 6, 2012 5:46 AM by jmsjr

    Display icon only with rich:message

    jmsjr Newbie

      Hi,

       

      I am using RichFaces 4.2.3.

      Is there a way to have rich:message display only the icon ?

      I have a CSS file which overrides the background-image as follows:

       

      {code}

      .rf-msg-err{

         background-image: url('#{facesContext.externalContext.requestContextPath}/resources/images/error.gif');

      }

      {code}

       

      ... which works to show the alternative image that I want to use, but now I want to show the image from <rich:message>  only beside the <h:inputText>, as I alredy have <rich:messages> in another section of the page. I tried adding the following in my CSS file:

       

      {code}

      .rf-msg-det{

         display: none;

         visibility: hidden;

      }

      {code}

       

      .. but when used as follows:

       

      {code}

          <h:inputText id="input1" required="true" requiredMessage="Input1 is required" value="#{requestBean.input1}" />

          <rich:message for="input1"/>

      {code}

       

      .. Both the text and image from <rich:message> are not shown at all.

      I am not at all a CSS expert, but I would have thought that the image will still be shown as its CSS class is "rf-msg-err" while the CSS class for the text is "rf-msg-det".

      The generated HTML output looks like below:

       

      {code}

      <td>

                <input id="j_idt6:input1" type="text" name="j_idt6:input1" value="" />

      </td>

      <td>

                <span class="rf-msg" id="j_idt6:j_idt9">

                          <span class="rf-msg-err" id="j_idt6:j_idt9:j_idt6:input1">

                                    <span class="rf-msg-det">Input1 is required</span>

                          </span>

                </span>

      </td>

      {code}

       

       

       

       

      I have also tried the example at http://webcache.googleusercontent.com/search?q=cache:Sh5SZ3oZGSAJ:extremejava.tpk.com.br/2009/01/12/marker-only-validation-error-with-richfaces/+&cd=3&hl=en&ct=clnk&gl=au,but it seems to be only intended for RichFaces 3.x.

        • 1. Re: Display icon only with rich:message
          Siva P Master

          Hi jmsjr,

           

          Go through the below link,

           

          https://community.jboss.org/thread/164922

           

          Thanks,

          Siva

          • 2. Re: Display icon only with rich:message
            jmsjr Newbie

            Siva Prasad wrote:

             

            Hi jmsjr,

             

            Go through the below link,

             

            https://community.jboss.org/thread/164922

             

            Thanks,

            Siva

             

            Hi Siva,

             

            I did saw that earlier, but what he did in that other post is sort of similar to what I am doing here. To quote from the working solution in that post:

             

            <composite:implementation>

                <style type="text/css">

                    .message-icon .rf-msg-err {

                        display: inline;

                        visibility: visible;

                    }

                    .message-icon .rf-msg-det {

                        display: none;

                        visibility: hidden;

                    }

                </style>

             

                <a4j:commandLink disabled="true">

                    <rich:message for="#{cc.attrs.forId}" styleClass="message-icon"

                        onmouseover="#{rich:component('tooltip')}.show(event);" />

                    <rich:tooltip id="tooltip">

                        <rich:message for="#{cc.attrs.forId}" styleClass="message-text" />

                    </rich:tooltip>

                </a4j:commandLink>

            </composite:implementation>

             

             

            So namely:

             

            --> Change the CSS class rf-msg-det so that it is invisible / hidden. Same as what I have done above. This should basically hide the actual text of the message text.

             

            But, in my case, both the icon AND the text are not visible.

             

            I have now even changed the CSS file as below:

             

             

            {code}

            .message-icon .rf-msg-err{

               background-image: url('#{facesContext.externalContext.requestContextPath}/resources/images/error.gif');

               display: inline;

               visibility: visible; 

            }

            .rf-msg-det{

               display: none;

               visibility: hidden;

            }

            .rf-msgs-err{

               background-image: url('#{facesContext.externalContext.requestContextPath}/resources/images/error.gif');

            }

            {code}

             

            .. and used:

             

            {code}

            <rich:message for="input1" styleClass="message-icon"/>

            {code}

             

             

            ... to use the same CSS class that was used in that other post.... and still BOTH text and icon are invisible.

            Generated HTML is:

             

            {code}

            <span class="rf-msg message-icon" id="j_idt5:j_idt8">

                 <span class="rf-msg-err" id="j_idt5:j_idt8:j_idt5:input1">

                      <span class="rf-msg-det">Input1 is required</span>

                 </span>

            </span>

            {code}

            So ... I am confused.

            • 3. Re: Display icon only with rich:message
              jmsjr Newbie

              The CSS changes actually work in IE9 and Chrome, but does not work in IE8. You need to have:

               

               

              {code}

                   <meta http-equiv="X-UA-Compatible" content="IE=8" />

              {code}

               

              .. if you just want to have the icon only ( but not the message ) displayed for <rich:message>