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.
Related
I have the following code:
<rich:dataScroller id="scrollerTest" for="userAdminTable"
fastControls="auto" renderIfSinglePage="false" render="userAdminTable" />
The data scroller works fine, but it looks weird, because the width of the table is much larger than the datascroller. It seems like there should be an easy way to control the width of the datascroller, but I am not able to find that info anywhere in the documentation. Do I need to just write custom CSS for this or did I miss something?
Move rich:dataScroller inside rich:dataTable:
<rich:dataTable ...>
...
<f:facet name="footer">
<rich:dataScroller renderIfSinglePage="false" fastControls="auto" />
</f:facet>
</rich:dataTable>
I using a simple h:panelGrid for displaying the table how could i specify styles for the table to make it better. i am a bit confused with all the stuff i looked online
This is what the code that i have been using
<h:panelGrid id="panel" columns="2" cellpadding="10"
cellspacing="1" style="align:center;">
<f:facet name="header">
<h:outputText value="Registration" />
</f:facet>
<h:outputText value="User Name:" escape="false" />
<h:inputText value="Hello World" />
<h:outputText value="Password:" escape="false" />
<h:inputSecret value="" />
</h:panelGrid>
Could you please specify the list of opssible optons for specifying the css or inline styles for elements in jsf
Thanks in advance
Don't try to use inline styles. Since jsf is a html code generator in this regard, inline styles ofthen do not apply to the html element you want them applied to. Use the styleClass attribute,and create css with the right selectors for the html elements you want to style. Use the apllied class in those selectors
See also
How to align items in a <h:panelGrid> to the right
I am going to access dialogForm, Here is the code:
<div id="leftDiv">
<div id="dialogDiv">
<p:dialog header="Login" widgetVar="dlg1">
<h:form id="dialogForm">
<h:panelGrid columns="3">
// my components
</h:panelGrid>
</h:form>
</p:dialog>
</div>
</div>
I try:
#leftDiv #dialogDiv #dialogForm{
background-color: red;
}
But not worked.
Two ways:
not recommend
<h:form id="dialogForm" prependId="false">
</h:form>
#dialogForm{
background-color: red;
}
jsf generate id's like formId:component1Id:component2Id and prependId="false" off this behaviour for current form
recommended
<h:form id="dialogForm" styleClass="formStyleClass">
</h:form>
.formStyleClass{
background-color: red;
}
Do not place dialog inside tables, containers likes divs with relative positioning or with non-visible overflow defined, in cases like these functionality might be broken. This is not a limitation but a result of DOM model. For example dialog inside a layout unit, tabview, accordion are a couple of examples. Same applies to confirmDialog as well.
As far as it comes to dialogForm, Id attribute of generated html is different than its JSF representation. You can check out your html id attribute by clicking it and choosing View Source.
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.
I use PrimeFaces 1.1 with JSF 1.2.
I need to change the style of PrimeFaces <p:lightBox> overlay that has a black border to blue, but the style attribute of the component don't change the overlay, but only the link from which the lightbox is been called.
<p:lightBox width="50%" height="25%"
style="border: 5px; border-style: solid; border-color: blue;">
<h:outputLink value="#" title="Leo Messi" >
<h:outputText value="The Messiah"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/images/barca/messi.jpg" />
<h:outputText style="color:#FFFFFF"
value="Messi is an unusual player. He is highly creative, and has the skills to take on defenders with ease. He is a versatile left-footed player who can play either in the middle or on either wing, or even as a centre forward.
Although he is quite short, he is so fast and physically strong that he can cope with larger opponents. He is incredibly powerful, and a specialist in such dead ball situations as corners, free kicks and penalties.
Leo Messi is cool-headed and able to assume several responsibilities in times of need. He is a player who is destined to have a very successful career in football."></h:outputText>
</h:panelGrid>
</f:facet>
</p:lightBox>
If I am not wrong that is the <a> tag generated. I don't know if you can add any attributes to lightbox's <div>.
I don't have your HTML code generated, but you can do this:
Use Google Chrome to inspect lightbox (right click on lightbox and inspect element) to view <div>'s class.
Add a new "onclick" attribute to <a> and using javascript restyle the elements...
But you should modify primefaces's css from the jar file... I don't find the javascript method elegant...