Win a copy of The Java Performance Companion this week in the Performance forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

JSF 1.2 - Facelet - CSS has no effect

 
Solomon Gnanadurai
Greenhorn
Posts: 24
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 18212
53
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Solomon Gnanadurai
Greenhorn
Posts: 24
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 18212
53
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

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
Posts: 24
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 18212
53
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 24
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 18212
53
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 24
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic