Re: Required CSS - how to remove icon (*)

[Chris Hane]

Thanks that worked great!

Now I'm trying to style a required label on a <tr:panelLabelAndMessage/> 
This component behaves differently than a <tr:panelFormLayout/>.  For 
example I have the following:

<tr:panelFormLayout fieldWidth="50%" labelWidth="50%">
 <tr:inputText value="#{backing.id}" label="Lbl 1" showRequired="true"/>

 <tr:panelLabelAndMessage label="List" showRequired="true">
  <tr:panelGroupLayout layout="horizontal">
     <tr:inputText value="#{backing.name}" readOnly="true" simple="true"/>
     <tr:commandLink action="#{backing.doAction}" id="buttonID"/>
  </tr:panelGroupLayout>
 </tr:panelLabelAndMessage>
</tr:panelFormLayout>


The first component generates something like:

<tr class="af_inputText p_AFRequired">
   <td class="af_inputText_label af_panelFormLayout_label-cell" nowrap="">
      <span class="AFRequiredIconStyle" title="Required">*</span>
      <label for="status">Status</label>
   </td>
   <td class="af_panelFormLayout_content-cell" valign="top" nowrap="">
      <input class="af_inputText_content" type="text" value="PENDING"/>
   </td>
</tr>

With the CSS:

.af_inputText.p_AFRequired .af_inputText_label{
   background-color:#FF0000;
}

This makes the label Red.


The panelLabelAndMessage generates:

<tr>
   <td class="af_panelLabelAndMessage_label af_panelFormLayout_label-cell">
      <span class="AFRequiredIconStyle" title="Required">*</span>
      List
   </td>
   <td class="af_panelFormLayout_content-cell" valign="top" nowrap="">
            <snip cell contents stuff/>
   </td>
</tr>

There is not a similar "required" style marker put here.  I'm trying to get 
the label for the panelLabelAndMessage to be red if showRequired="true" (or 
some other indicator for "required".  I've tried to use inlineStyle and 
styleClass; but no dice.  I could very easily not be using them correctly. 
 Anyway to do this?

Thanks for the help,
Chris....


Jeanne Waldman wrote:
You can try:
.AFRequiredIcon:alias {content: inhibit }

Simon Lessard wrote:
Hello Chris,

You can overload the icon selector and have it point on an invisible 
1x1 GIF
file. You can also try to inhibit the content property, but I never tried
the latter so I'm not sure if it actually works. The required icon 
selector
is AFRequiredIcon:alias


Regards,

~ Simon

On 4/16/07, Chris Hane <[EMAIL PROTECTED]> wrote:

I am styling my required fields and an icon (*) is being added.  
Which css
element do I need to remove this?  AFRequiredIconStyle is defined 
like so:


.AFRequiredIconStyle{
    font-family:Courier,sans-serif;
}

No icon(*).  I have the following xhtml (facelets) fragment:

<tr:inputText label="Status" value="${backing.property}"
               showRequired="true"/>

This creates the following html which includes an icon (*).

<td class="af_inputText_label af_panelFormLayout_label-cell" nowrap="">
    <span class="AFRequiredIconStyle" title="Required">*</span>
    <label for="status">Status</label>
</td>

Thoughts on where I need to remove the icon (*) from, or override it to
not
be included?

Thanks,
Chris....