You are viewing a plain text version of this content. The canonical link for it is here.
Posted to adffaces-user@incubator.apache.org by Chris Hane <ch...@gmail.com> on 2007/04/16 17:47:03 UTC
Required CSS - how to remove icon (*)
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....
Re: Required CSS - how to remove icon (*)
Posted by Chris Hane <ch...@gmail.com>.
Jeanne Waldman wrote:
> I see. You can submit a JIRA issue to have this fixed. If we rendered
> p_AFRequired on the panelLabelAndMessage when the showRequired is true,
> then you can do what you want, although both the * and the text will be
> red. There is not 'hook' for just the text. It appears that the label
> == the * + the text. Is this alright?
Actually, it is the background-color that I want to set to red (I
mistakenly used color above). As for the hook, that would be fine for my
needs. I would think having the "icon + text" use the same style would be
fine. I personally don't have a need for the icon to have a different
style than the text.
JIRA issues is: https://issues.apache.org/jira/browse/ADFFACES-451
Thanks,
Chris....
Re: Required CSS - how to remove icon (*)
Posted by Jeanne Waldman <je...@oracle.com>.
Chris Hane wrote:
> Thanks for the comments.
>
> Jeanne Waldman wrote:
>>
>>
>> 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.
>
>
> Sorry. The CSS I showed was from the generated file. I do use the
> CSS in the skin file just the way you described. My Skin is:
>
> af|inputText:required::label{
> background-color: #FF0000;
> }
>
> What I was hoping for was something like the following that I could
> put into the skin file:
>
> af|panelLabelAndMessage:required::label{ color: red; }
>
> This does not seem to work though.
>
>> You can try
>>
>> af|panelLabelAndMessage::label .AFRequiredIconStyle {color: red}
>
> When sent the .AFRequiredIconStyle {color: red} in the skin file, it
> just changed the color of the icon to red and not the background of
> the label cell.
I see. You can submit a JIRA issue to have this fixed. If we rendered
p_AFRequired on the panelLabelAndMessage when the showRequired is true,
then you can do what you want, although both the * and the text will be
red. There is not 'hook' for just the text. It appears that the label
== the * + the text. Is this alright?
>
> Chris....
>
>
>
Re: Required CSS - how to remove icon (*)
Posted by Chris Hane <ch...@gmail.com>.
Thanks for the comments.
Jeanne Waldman wrote:
>
>
> 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.
Sorry. The CSS I showed was from the generated file. I do use the CSS in
the skin file just the way you described. My Skin is:
af|inputText:required::label{
background-color: #FF0000;
}
What I was hoping for was something like the following that I could put
into the skin file:
af|panelLabelAndMessage:required::label{ color: red; }
This does not seem to work though.
> You can try
>
> af|panelLabelAndMessage::label .AFRequiredIconStyle {color: red}
When sent the .AFRequiredIconStyle {color: red} in the skin file, it just
changed the color of the icon to red and not the background of the label cell.
Chris....
Re: Required CSS - how to remove icon (*)
Posted by Jeanne Waldman <je...@oracle.com>.
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 <ch...@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....
>>>>
>>>
>>
>
Re: Required CSS - how to remove icon (*)
Posted by Chris Hane <ch...@gmail.com>.
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 <ch...@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....
>>>
>>
>
Re: Required CSS - how to remove icon (*)
Posted by Jeanne Waldman <je...@oracle.com>.
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 <ch...@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....
>>
>
Re: Required CSS - how to remove icon (*)
Posted by Simon Lessard <si...@gmail.com>.
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 <ch...@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....
>