wood burning stoves*
The moose likes JSF and the fly likes JSF 1.2 - Facelet - CSS has no effect Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "JSF 1.2 - Facelet - CSS has no effect" Watch "JSF 1.2 - Facelet - CSS has no effect" New topic
Author

JSF 1.2 - Facelet - CSS has no effect

Solomon Gnanadurai
Greenhorn

Joined: May 20, 2011
Posts: 24
I created xhtml from HTML mockups. When I applied CSS for h:inputText there is no effect.

In Xhtml I have,

<h:inputText id="e90" size="29" styleClass="cc22"/>
And in external CSS I have,
.cc22 { /* Common */
font : 8pt 'Arial', Helvetica, sans-serif;
color : #000000;
padding : 1.50pt;
}
input#e90 { /* Text name="text_box" */
position : absolute;
left : 627.00pt;
top : 222.00pt;
width : 149.25pt;
}

The above is not working and I tried the below options which is also not working

Option 1:
<h:inputText size="29" styleClass="cc22,e90"/>

#e90 input { /* Text name="text_box" */
position : absolute;
left : 627.00pt;
top : 222.00pt;
width : 149.25pt;
}

Option 2:
<h:inputText size="29" styleClass="cc22,e90"/>

.e90 { /* Text name="text_box" */
position : absolute;
left : 627.00pt;
top : 222.00pt;
width : 149.25pt;
}
Option 3:

<h:inputText size="29" styleClass="cc22,e90"/>

#e90 { /* Text name="text_box" */
position : absolute;
left : 627.00pt;
top : 222.00pt;
width : 149.25pt;
}

Option 4:
<h:inputText size="29" styleClass="e90"/>

.e90 { /* Text name="text_box" */
position : absolute;
left : 627.00pt;
top : 222.00pt;
width : 149.25pt;
}'

There is no issue in loading CSS as HTML elements like div has CSS class which are applied. Only the JSF elements has no effects.

P.S: Here I didnt include CSS cc22 in the above options but in my application I did
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15960
    
  19

CSS will ignore any attributes that don't apply to the HTML element that they're requested for. JSF can make this a little difficult because the JSF element and the final rendered HTML may not match up 1-to-1.

The best way to debug stuff like this when using the Firefox browser is to use the Firebug plugin and the "inspect element" right-menu command. In IE, the F12 key will bring up an inspector that will show what style elements have been applied.


Customer surveys are for companies who didn't pay proper attention to begin with.
Solomon Gnanadurai
Greenhorn

Joined: May 20, 2011
Posts: 24
Thanks for your reply Tim.

I tried the below option 1 and option2 which is working

Option1:

<h:inputText size="31" styleClass="e79"/>

.e79 { /* Text name="text_box" */
position : absolute;
left : 182.25pt;
top : 276.75pt;
width : 160.50pt;
}

Option 2:

<h:inputText size="31" styleClass="cc22 "/>

.cc22 { /* Common */
font : 8pt 'Arial', Helvetica, sans-serif;
color : #000000;
padding : 1.50pt;
}

But when I try to apply more than one CSS rule like below there is no effect

<h:inputText size="31" styleClass="cc22,e79"/>

.e79 { /* Text name="text_box" */
position : absolute;
left : 182.25pt;
top : 276.75pt;
width : 160.50pt;
}
.cc22 { /* Common */
font : 8pt 'Arial', Helvetica, sans-serif;
color : #000000;
padding : 1.50pt;
}

So how do we apply more than one CSS style for the JSF elements?
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15960
    
  19


So how do we apply more than one CSS style for the JSF elements?


You've been suckered. Use spaces to separate the classnames in your styleClass, not commas.


Oops.
Solomon Gnanadurai
Greenhorn

Joined: May 20, 2011
Posts: 24
Oh no silly mistake. Thanks Tim

It works as expected only if it is a CSS class. If I have CSS IDs there is no effect. Any thoughts on how to use CSS ids in JSF elements? For now I have converted CSS ids to classes and moing on but would really like to use ids also as we do in HTMLs.
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15960
    
  19

Applying CSS by ID is a bit tricky. The client matches CSS to the "real" IDs, and the "real" IDs are not the same as the JSF IDs. For example, "item1" in an outputText on form "form1" would have a "real" ID of "form1:item1".
Solomon Gnanadurai
Greenhorn

Joined: May 20, 2011
Posts: 24
I tried the below but didnt work. In xhtml I have <h:form id="form1"> <h:inputText id="e94" size="31" styleClass="cc22"/>

input#form1:e94 { /* Text name="text_box" */
position : absolute;
left : 182.25pt;
top : 222.00pt;
width : 160.50pt;
}


So what change I should do in CSS to match the real IDs?
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15960
    
  19

I think you have to define the ID more like this:


The ":" in the ID isn't really a legal ID character, which is where the problem comes from. Also, I don't guarantee that this is exactly the right syntax or that it works in all browsers. I'd have to google for some authoritative documentation on how to do this.
Solomon Gnanadurai
Greenhorn

Joined: May 20, 2011
Posts: 24
I tried that option but didnt work. I have defined all the ids as class and I am fine with that for now.

Thanks Tim for all your replies.
 
Don't get me started about those stupid light bulbs.
 
subject: JSF 1.2 - Facelet - CSS has no effect
 
Similar Threads
JSF - Missing source code using templating and composition
Problem using divs.
setting width in panelGroup, panelGrid
get parameters from select
div problem in CSS