incubator-adffaces-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Jeanne Waldman <jeanne.wald...@oracle.com>
Subject Re: Required CSS - how to remove icon (*)
Date Mon, 16 Apr 2007 20:41:08 GMT


Chris Hane wrote:
> 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;
> }
You should use the skin's css format of af|inputText:required::label {} 
instead of the above.
We abstract out the css styleclasses in the skinning css format. Mostly 
because we can then
change it and not affect the skin.

>
> 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>
You can try

af|panelLabelAndMessage::label .AFRequiredIconStyle {color: red}
>
> 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