Apex Code Development You need to sign in to do that
Don't have an account?
Paul Berglund CSS class does not work inside of an apex:component
I added a CSS class to an apex:component
<head>
<style>
.myclass {
font-size: large;
}
</style>
</head>
And then accessed it
<apex:outputText styleClass="myclass" value="some text" />
And nothing happens. If I use the style tag, it works. If I put the definition in the apex:page calling the component, it works. Very strange!
<head>
<style>
.myclass {
font-size: large;
}
</style>
</head>
And then accessed it
<apex:outputText styleClass="myclass" value="some text" />
And nothing happens. If I use the style tag, it works. If I put the definition in the apex:page calling the component, it works. Very strange!
I was able to make use of CSS in Vf component if I have understood your issue completely -
I created one component (TestComponent ) -
<apex:component>
<head>
<style>
.myclass {
font-size: 28px;
}
</style>
</head>
<apex:outputText styleClass="myclass" value="some text" />
</apex:component>
and then accesed it in a VF page -
<apex:page >
<c:TestComponent />
</apex:page>
The string 'some text' is displayed withh CSS update (28px)
Please let me know if it helps.
Thanks,
Shashi
<apex:page >
<c:TestComponent />
<br/>
<apex:outputText styleClass="myclass" value="test text" />
</apex:page>
Regards,
Shashi
I know its too late to reply now. But it will be helpful for someone who is looking for a solution.
Please add layout="none" to your apex component , like this
<apex:component controller="test" layout="none">
Generally the apex component is produced with HTML span tags. So the <style> is no more inside head tag but a span tag, thats the reason it doesnt work. But when you say layout="none" ; this will generate the component without html tags - thus the style tags will be visible and applied on the content.