I have panels and would like to change the header's background color of only one of them. Thus I can't juste change the ui-panel-titlebar style.
I tried the following without success.
<p:panel ....>
<f:facet name="header" styleClass="ui-panel-my-titlebar">
....
</f:facet>
</p:panel>
If I put the styleClass in the p:panel tag, then is the background of the content change too.
My styleClass:
.ui-panel-my-titlebar {
background: #BBBBBB;
}
I got it to work with the following:
<p:panel styleClass="customTitleBar">
<f:facet name="header">
....
</f:facet>
</p:panel>
css:
.customTitleBar > .ui-panel-titlebar {
background: #BBBBBB;
}
:host ::ng-deep {
.p-panel .p-panel-header {
padding: 0.5rem;
background: linear-gradient(-206deg, #4b6cb7 5%, #182848 100%);
color: #ffffff;
}
}
This is working with PrimeNG.
Related
I have the following table in a .xhtml file. I want to color the entire row of the table, not only the text background. How can I do this in RichFaces?
Note: the table has more columns, I just posted here one of them.
<rich:panel styleClass="container dynamic grey table col7">
<f:facet name="header">#{msg.toop_normalverteilungstest_results}</f:facet>
<rich:dataTable styleClass="dynamic equicol7"
value="#{normalverteilungstestBean.statisticResultsList}" var="stat" id="table">
<rich:column id="testschritteVal" styleClass="col1-table" headerClass="col1-table">
<f:facet name="header">
<h:outputText value="#{msg.masterdata_normalverteilungstest_testschritte}" />
</f:facet>
<h:outputLabel rendered="#{stat.color == 'g'}" style="background-color:MediumSeaGreen;"
value="#{stat.testschritte}" styleClass="col1" />
<h:outputLabel rendered="#{stat.color == 'r'}" style="background-color:Tomato;"
value="#{stat.testschritte}" styleClass="col1" />
<h:outputLabel rendered="#{stat.color == 'w'}" value="#{stat.testschritte}" styleClass="col1" />
</rich:column>
</rich:dataTable>
</rich:panel>
There is rowClass attribute. Just combine this with CSS. For example:
<style>
tr.g { background-color: MediumSeaGreen; }
tr.r { background-color: Tomato; }
tr.w { background-color: white; }
</style>
and rowClass="#{stat.color}" in rich:dataTable.
I am trying to create following datagrid with primefaces
Please can anyone suggest which data component can work to get the above table.
You can use a panelGrid with your own styling:
<p:panelGrid>
<f:facet name="header">
<p:row>
<p:column>HEADING1</p:column>
<p:column>HEADING2</p:column>
<p:column>HEADING3</p:column>
<p:column>HEADING4</p:column>
<p:column>HEADING5</p:column>
<p:column>HEADING6</p:column>
<p:column>HEADING7</p:column>
<p:column>HEADING8</p:column>
</p:row>
</f:facet>
<p:row>
<p:column styleClass="firstcolumn">TITLE1</p:column>
<p:column/> <p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
</p:row>
<p:row>
<p:column styleClass="firstcolumn">TITLE2</p:column>
<p:column/><p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
</p:row>
<p:row>
<p:column styleClass="firstcolumn">TITLE3</p:column>
<p:column/><p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
</p:row>
</p:panelGrid>
<style>
.ui-panelgrid-even, .ui-panelgrid-odd{
border: 1px solid #ffffff;
background:#88B147;
}
.ui-panelgrid-header .ui-widget-header{
background: #0C52CB;
font-weight: normal;
border: 1px solid #ffffff;
}
.ui-panelgrid .firstcolumn{
background: #8BC1FF;
color: #000000;
}
</style>
If you are showing data which is in a list on your bean it might be more appropriate with a dataTable though. But this you can style also, use firebug or similar to find the styles you need to overwrite.
I have a dialog that contain
<p:dialog id="sqlDialog"
widgetVar="sqlWidgetVar"
header="SQL"
width="800"
position="center"
minimizable="true"
maximizable="true"
appendToBody="true"
dynamic="true">
<h:outputText id="sql"
escape="false"
value="#{bean.sql}"
style="color: green"/>
</p:dialog>
Since the text is very long I need to add a scroll option
How can I do it ?
Thanks
Use CSS to make it a block element with fixed dimensions and an overflow.
<h:outputText ... styleClass="sqlDialogText" />
with
.sqlDialogText {
display: block;
width: 600px; /* Optional, depends otherwise on parent. */
height: 300px;
overflow: auto;
color: green;
}
Alternatively, just give the dialog a fixed height.
<p:dialog ... height="300">
Note that this has nothing to do with JSF. It's just a HTML/CSS/JS code generator. The <h:outputText> generates a HTML <span> element. You just have to alter the CSS accordingly for the look'n'feel.
I am trying to write some JSF code that centers an image in a panel grid. The simple approach would appear to be:
<h:panelGrid columns="1" style="text-align:center">
<h:graphicImage value="/path/to/image.png" />
</h:panelGrid>
but this approach does not seem to work.
Use div with align=center
Or use CSS:
JSF
<h:panelGrid styleClass="centered">
...
</h:panelGrid>
CSS
.centered {
margin: 0px auto;
}
In JSF is it possible to have a datatable displays records as follows?
[Name ][Last Name][Age]
1. John Doe 20
Extra info on record 1
2. John Smith 20
Extra info on record 2
Thank you
I'm sure there are a number of ways you could do this.
If you don't mind nesting tables, you can use the panelGrid tag and CSS.
View:
<f:view>
<h:dataTable value="#{peopleBean.people}" var="row">
<h:column id="column1">
<f:facet name="header">
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="First Name" />
<h:outputText value="Last Name" />
<h:outputText value="Age" />
</h:panelGrid>
</f:facet>
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="#{row.firstname}" />
<h:outputText value="#{row.lastname}" />
<h:outputText value="#{row.age}" />
</h:panelGrid>
<h:outputText styleClass="extra" value="#{row.extraInfo}" />
</h:column>
</h:dataTable>
</f:view>
Stylesheet:
TABLE {
width: 100%;
}
TABLE TR TD {
text-align: left;
}
.cell {
width: 40%;
}
.age {
width: 20%;
}
.extra {
background-color: silver;
padding: 4px;
display: block;
width: 100%;
}
Third libraries, such as RichFaces, allow you to do that with the principle of subTable.
You can check this example from RichFaces. It is a little more complicated compared as what you want to do, but it shows the usage of subTable component...