styling jsf tag in css file

Question

I have a web project. I have no trouble when styling html tags, div or class. But when I style a JSF tag (graphicImage) it doesn't work.

It doesn't work neither like this :

graphicImage{
width:280px;
height:130px;
margin-left:10px;}

nor:

h:graphicImage{
width:280px;
height:130px;
margin-left:10px;}

How can I style with external css? Can you please help me?

h:graficImage might me in your code. You have to style what it renders. Or add inline style attribute — Gerardo BLANCO
– Gerardo BLANCO, Commented Apr 19, 2018 at 17:36
Of course I use h:graphicImage tag in xhtml file. And I want to style this tag.. — codergirrl
– codergirrl, Commented Apr 19, 2018 at 17:38
Yes, but what does it render on your client? Do you have a live preview — Gerardo BLANCO
– Gerardo BLANCO, Commented Apr 19, 2018 at 17:39
Please take a step back and learn what JSF is and does before trying things... It effectively just renders HTML — Kukeltje
– Kukeltje, Commented Apr 19, 2018 at 17:40
Yes the photo is on the web site with its size. (really big). not the size I wrote in css — codergirrl
– codergirrl, Commented Apr 19, 2018 at 17:42

Kukeltje · Accepted Answer · 2018-04-20 06:55:27Z

2

You DON'T style jsf xhtml tags. You style the client-side html. Take a browser developer tool and inspect the source of what is in the browser. A JSF h:graphicImage client-side side is an <img> tag. Style that.

img {
   width:280px;
   height:130px;
   margin-left:10px;
}

But you can of course use the style and styleClass as well

edited Apr 20, 2018 at 6:55

answered Apr 19, 2018 at 21:41

Kukeltje

12.4k4 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

drs · Accepted Answer · 2018-04-20 03:36:01Z

1

Maybe you can do at the tag itself, by using style attribute.

<h:graphicImage style="width:280px;
                height:130px;
                margin-left:10px;"/>

or might be like this.

<h:graphicImage styleClass="testStyle"/>

.testStyle
 {
    width:280px;
    height:130px;
    margin-left:10px;
 }

answered Apr 20, 2018 at 3:36

drs

543 bronze badges

1 Comment

Kukeltje Over a year ago

Sure but that does not explain the error in thinking in the question and hence the reason for the question. Using a (styleClass) is available all over the internet

Collectives™ on Stack Overflow

styling jsf tag in css file

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related