incubator-adffaces-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Chris Hane <chrish...@gmail.com>
Subject Re: Required CSS - how to remove icon (*)
Date Mon, 16 Apr 2007 19:48:51 GMT
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 <chrishane@gmail.com> 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....
>>>
>>
> 

Mime
View raw message