When I try to inspect with firebug, i see nothing about the title of commandlink. So, how can
I change its style?
<p:commandLink id="ajax" update="panel,display"
style="margin-right:20px;"
title="STYLE?">
</p:commandLink>
I don't know if I understood question correctly, but you can't edit this style! The title generated is a html component... Try to use something like it:
<p:tooltip for="ajax" >
<h:outputText escape="false" value="<strong>Style?</strong>"/>
</p:tooltip>
Now commandlLink title style can be modified. You can use a global tooltip too.
Related
I am using Primefaces graphicImage inside a p:tooltip and would like to set the width and height for the images individually.
<p:remoteCommand....update="myImage" />
<p:tooltip beforeShow="remoteCommand()">
<p:graphicImage id="myImage"... style="#{myBean.myStyle}" />
....
Update:
Bean.myStyle is triggered correctly and the style parameter is updated in the page source, but not in the dom tree.
If I set style="width:100px" directly it works, but if the value comes from the bean, it is ignored.
It seems like the style-attribute of graphicImage gets updated but not the component itself.
What am I missing here?
I think style value is setted when the document is loaded and its never reloaded, when its visible just its display:none value is changing. So I would give an id to p:graphicImage then I would add a p:ajax using onShow or similar event (I dont know which one is available for tooltip) then I would use update attribute to render graphic image. If I remember right even it should work just with <p:ajax /> without any attribute but I am not sure
So it should look like that:
<p:graphicImage id="x" style="#{bean.value}">
<p:ajax event="show" update"x"/>
</p:graphicImage>
use this
<p:graphicImage width="#{bean.widthValue}" height="#{bean.heightValue}" >
</p:graphicImage>
I have two commandLink in my code.
<h:commandLink action="#{localeController.switchLocale('en')}" value="English"/> |
<h:commandLink action="#{localeController.switchLocale('fr')}" rendered="true" value="French"/>
I want to set some css styling for the selected Link. I tried with a:visited but its not working. How can I make some changes for the selected Link?
Please suggest!
how can i set the header style of the p:panel component? i want to set the height of the panel_header div.
<p:panel id="panel"
toggleSpeed="500" toggleable="true">
<f:facet name="header" >
<p:outputPanel style="float:left;">
<p:commandButton process="#this" id="new"
oncomplete="dialog.show();" icon="ui-icon-plus" />
<p:spacer width="15px;" />
</p:outputPanel>
<h:outputLabel value="Title" />
</f:facet>
</p:panel>
You normally use CSS for styling. Use the .ui-panel .ui-panel-titlebar selector. You can find the CSS selectors and all its properties in every bit decent webbrowser developer toolset. In Chrome, IE9 and Firebug, rightclick the titlebar and choose Inspect Element or press F12.
Here's an example how it look like in Chrome:
To start, you could set the padding to 0.
.ui-panel .ui-panel-titlebar {
padding: 0;
}
Put this in a .css file which you load by <h:outputStylesheet> inside <h:body>, so that it get loaded after PrimeFaces default CSS.
See also:
How do I override default PrimeFaces CSS with custom styles?
Enclose the p:panel in <h:form prependId="false">.
Then you can use the ID selector (as mentioned in the other reply), as the id will not change.
.ui-panel-titlebar {
//Your style-sheet code
}
Adding a header facet to the panel is a good solution if you just need to change one panel. Inside the facet add any styling you require.
<p:panel>
<f:facet name="header" style="font-size: medium">
</f:facet>
</p:panel>
I avoid messing with the primefaces styling as much as possible if I just want to change individual components.
Let’s say we have:
<a id="link" href="#" title="i am the title">link</a>
Is there a way to use CSS to uppercase the "i am the title" text that will be shown on mouse hover by default?
Not that I'm aware of.
You can select an element by its attribute(s), but not select an attribute itself.
A little bit of JavaScript can do it, however...
var elem = document.getElementById('link');
elem.title = elem.title.toUpperCase();
jsFiddle.
No - title like tooltips are browser dependant, CSS can't change them.
But here's a link that shows how you can make a fake tooltip look like you want with CSS only:
How to change the style of Title attribute inside the anchor tag?
I've got the solution, provided you are using jQuery.
Here's a live demo - http://jsfiddle.net/WzYkQ/
I want to apply CSS specific to <f:selectItem> in <h:selectOneMenu> to be displayed in a different style.
e.g. I want every option of coffee in the list below to be displayed in a different color.
<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 here?
The <f:selectItem> renders a HTML <option> element. It has very limited CSS styling support. The color property is not among them. Even more, it works in MSIE only, not in other webbrowsers. There is however no way to give each <option> element its own style attribute by JSF, so closest what you can get is applying a CSS rule on all options and accepting that it works in MSIE only.
<h:selectOneMenu styleClass="mymenu">
with
.mymenu option {
color: red;
}
Your best bet is to replace the dropdown by a <ul><li> with a good shot of CSS/JavaScript which mimics it to look like a dropdown. Some JSF component libraries has such a component, such as PrimeFaces' <p:selectOneMenu>. Check the Custom content example in its 3.0 showcase.
I’m not familar with JSF, but I assume the <f:selectItem> is not what gets sent to the browser.
You’ll need to figure out what HTML is sent to the browser for that JSF tag, and apply your CSS to that.