Display icon only with rich:message

[jmsjr]

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.

[sivaprasad9394]

Hi jmsjr,

Go through the below link,

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

Thanks,

Siva

[jmsjr]

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.

[jmsjr]

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>