aspose file tools*
The moose likes JSF and the fly likes CSS for individual selectItem tag Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "CSS for individual selectItem tag " Watch "CSS for individual selectItem tag " New topic
Author

CSS for individual selectItem tag

sana shah
Greenhorn

Joined: Jul 14, 2011
Posts: 10
I want every option in selecOnemMenu to be displayed in a diffrent style.



<h:selectOneMenu value="#{user.favCoffee1}">
<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
</h:selectOneMenu>


Can anyone help me out in this.
Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

If style attribute is accepted by JSF tagm then code for same goes like this:


[LEARNING bLOG] | [Freelance Web Designer] | [and "Rohan" is part of my surname]
sana shah
Greenhorn

Joined: Jul 14, 2011
Posts: 10
Sagar Rohankar wrote:If style attribute is accepted by JSF tagm then code for same goes like this:



style attribute is accepted by selectOneMenu but it is general for all the selectItem tags.
I want specific style for selectItem tag. I tried using style attribute for selectItem tag but it throws an error.
Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

sana sharma wrote:
Sagar Rohankar wrote:If style attribute is accepted by JSF tagm then code for same goes like this:

I want specific style for selectItem tag. I tried using style attribute for selectItem tag but it throws an error.

Quick Google give me hint for how to do this, http://www.horstmann.com/corejsf/jsf-tags.html#Table4_3
You can use "styleClass" attribute on every JSF tag, as it is a basic attribute.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16246
    
  21

Sorry, no can do.

selectItem is part of the "f:" (facet) tagset and therefore does not correspond to UI display elements - it's data.

A bigger problem is that the h:selectOneMenu tag renders as an HTML SELECT tag, and the HTML select tag (and the OPTION tags that the facets generate) don't support per-item styling.

You CAN achieve this kind of effect, but only by faking it with JavaScript components that build up the display to look like a selectOneMenu/SELECT control but are actually juggling multiple display elements, just as the "combobox" controls do (HTML doesn't support combo boxes, either). You should shop around among the extension tagset products and see if any of them will do what you want. Building it from scratch is going to take some time.


Customer surveys are for companies who didn't pay proper attention to begin with.
Sagar Rohankar
Ranch Hand

Joined: Feb 19, 2008
Posts: 2902
    
    1

Tim Holloway wrote:
A bigger problem is that the h:selectOneMenu tag renders as an HTML SELECT tag, and the HTML select tag (and the OPTION tags that the facets generate) don't support per-item styling.

Pardon my ignorance about JSF tags, but if the JSF tag is finally get rendered as HTML, then whats the problem JSF might have if it supports the HTML standard attribute, like "style" OR am I missing something very silly for which JSF is designed and intended to be used.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16246
    
  21

Sagar Rohankar wrote:
Pardon my ignorance about JSF tags, but if the JSF tag is finally get rendered as HTML, then whats the problem JSF might have if it supports the HTML standard attribute, like "style" OR am I missing something very silly for which JSF is designed and intended to be used.


Well, as I said, the selectItems themselves are not "h" (html) tags, they're "f" tags and the "f" tags don't inherit from the HTML UI control base classes, instead they convert into SelectItem objects, If you check the docs, you'll see that the "style" attribute isn't available on selectItem elements the way it is on "h" items and that there's no place in the SelectItem class to hold that information anyway. Including the "style=" attribute on a selectItem(s) tag would have been fatal on pre-facelets pages, but Facelets generally ignores attributes that aren't defined, so the fault is harder to see.

When using the HTML renderer, selectItem converts into an HTML OPTION element, and according to a quick check on my HTML reference, STYLE and CLASS are, in fact listed as valid attributes on OPTION as part of the common attribute set. However, actual support for styling varies with the object type. At the moment, I know of no browsers that actually support any of the more interesting style attributes such as font, background color, etc. on OPTIONS, but even if they didn't, JSF wouldn't pass it through.
sana shah
Greenhorn

Joined: Jul 14, 2011
Posts: 10
hey Tim thanks a lot for your prompt reply.

I have a code

<h:selectOneMenu id="addStream" value="#{streamManager.addStream}">
<f:selectItems value="#{streamManager.addStreamt}" var="role" />
</h:selectOneMenu>

In the stream list there are two catagories of stream. Is there any way to differentiate between the two in the same list which is in alphabatical order.


Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16246
    
  21

If you mean visually, then no there isn't. All selectItem and selectItems are just sources for a single list of HTML OPTION elements. You can't even tell whether an item came from an individual selection or a list if you look at the generated output.

The problem is that unless you have a browser that supports styles on HTML OPTION elements, anything you do in JSF won't help.
sana shah
Greenhorn

Joined: Jul 14, 2011
Posts: 10
Is it possible to add a red bullet in front of stream name of one of the type of stream in the drop down.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16246
    
  21

sana shah wrote:Is it possible to add a red bullet in front of stream name of one of the type of stream in the drop down.


Unfortunately, no. At least not in any browser I'm familiar with. The limitation isn't in JSF or CSS, it's in how clients choose to render HTML <OPTION> elements.
sana shah
Greenhorn

Joined: Jul 14, 2011
Posts: 10
Sagar Rohankar wrote: quote=Sagar Rohankar]If style attribute is accepted by JSF tagm then code for same goes like this:

I want specific style for selectItem tag. I tried using style attribute for selectItem tag but it throws an error.
Quick Google give me hint for how to do this, http://www.horstmann.com/corejsf/jsf-tags.html#Table4_3
You can use "styleClass" attribute on every JSF tag, as it is a basic attribute.
sana shah
Greenhorn

Joined: Jul 14, 2011
Posts: 10
Sagar Rohankar wrote:
sana shah wrote:
Sagar Rohankar wrote:If style attribute is accepted by JSF tagm then code for same goes like this:

I want specific style for selectItem tag. I tried using style attribute for selectItem tag but it throws an error.

Quick Google give me hint for how to do this, http://www.horstmann.com/corejsf/jsf-tags.html#Table4_3
You can use "styleClass" attribute on every JSF tag, as it is a basic attribute.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16246
    
  21

sana shah wrote:
You can use "styleClass" attribute on every JSF tag, as it is a basic attribute.


Look again:

http://download.oracle.com/docs/cd/E17802_01/j2ee/j2ee/javaserverfaces/1.1_01/docs/tlddocs/f/selectItem.html

You can use "styleClass" on the "h:" (HTML) elements. The selectItems are part of the "f:" element set, and they don't correspond directly to UI controls. Instead they provide facets and have no direct UI equivalent, although when applied to an h:selectOneMenu, the selectOneMenu HTML renderer will use the data to render HTML <OPTION> elements. Which is why the above JavaDoc doesn't list style or styleClass as valid options for this tag.

As far as it goes, it seems that style IS a basic attribute on HTML OPTION, but since no known browser supports it, JSF doesn't either. Non-facelets JSF would flag the styleClass on a selectItem tag as an error. Facelets simply ignores invalid attributes.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: CSS for individual selectItem tag