I am using <p:rating> in my JSF2-PrimeFace application. Find the code below:
<p:panel id="popular_offers_panel" style="width: 97%" styleClass="remove-PF-border panel-grid tr panel-grid td panel-header-title-medium">
<p:dataGrid id="popular_offers_data_grid" var="offer" value="#{HmBen.offersList}" columns="3" paginatorAlwaysVisible="false" styleClass="no-border-for-component">
<h:link title="#{msg._offer_on}#{msg._colon} #{offer.tag}" outcome="offer_details?offer=#{offer.seoURL}">
<p:panel id="popular_offers_details_panel" header="#{offer.where}" styleClass="panel-content-central-horizontal small-panel panel-grid tr panel-grid td panel-hover panel-header-title-small">
<p:panelGrid columns="1" style="text-align: center">
<div class="component-spacing-top"/>
<h:graphicImage alt="#{offer.where}" value="#{offer.imgFullPath}" class="small-panel-image" />
<p:rating value="#{offer.rating}" readonly="true" />
<p:panel styleClass="remove-PF-border">
<h:outputText value="#{offer.what}" rendered="#{offer.isOfferByTitle}" styleClass="font-size-1em font-weight-bold default-font-color" />
<h:outputText value="#{offer.discount}" rendered="#{offer.isOfferByDetails}" styleClass="font-size-1em font-weight-bold default-font-color" />
<sup>
<h:outputText value="#{msg._expiring_soon}" rendered="#{offer.isExpiringSoon}" styleClass="font-size-0-8em default-contrast-font-color" />
<h:outputText value="#{msg._this_offer_might_have_expired}" rendered="#{offer.isMightHaveExpired}" styleClass="font-size-0-8em default-contrast-font-color" />
<h:outputText value="#{msg._this_offer_has_expired}" rendered="#{offer.isExpired}" styleClass="font-size-0-8em default-contrast-font-color" />
</sup>
</p:panel>
</p:panelGrid>
</p:panel>
</h:link>
</p:dataGrid>
</p:panel>
Any clue on this?
Since p:rating render divs for each stars and they are floating, the main div has no size. Here is a way to achieve your goal :
CSS :
.center-rating
{
width: 96px;
margin: 0 auto;
}
View :
<p:rating value="#{offer.rating}" readonly="true" styleClass="center-rating" />
Related
I'm trying to change the css of a basic panelgrid.
Basically I want the text of the right column on the right. This doesn't work
<p:panelGrid columns="2" style="height: 220px;width:100%;">
<f:facet name="header">
<h:outputText value="Car" />
</f:facet>
<h:outputText value="Colour:" />
<h:outputText style="text-align: right;" value="blue" />
<h:outputText value="Brand:" />
<h:outputText style="text-align: right;" value="Ferrari" />
</p:panelGrid>
Is there any way to change it ?
I have this table with 3 columns. The third column is for validation message which by default is empty.
<h:form>
<h:panelGrid id="panel" styleClass="data_table_pricing" columns="3">
<h:outputText value="Title"/>
<h:inputText id="title" value="#{pricingForm.title}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="title_message" for="title" style="color:red"/>
<!-- // -->
<h:outputText value="First name"/>
<h:inputText id="first_name" value="#{pricingForm.firstName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="first_name_message" for="first_name" style="color:red"/>
<!-- // -->
<h:outputText value="Last name"/>
<h:inputText id="last_name" value="#{pricingForm.lastName}" validatorMessage="Value is too big.">
<f:validateLength minimum="0" maximum="40" />
<f:ajax event="change" render="#form"/>
</h:inputText>
<h:message id="last_name_message" for="last_name" style="color:red"/>
<!-- // -->
</h:panelGrid>
<h:commandLink value="reset" class="link" type="reset" style="margin: 20px;">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
<h:commandLink value="Next" class="link" style="margin: 20px;" actionListener="#{pricingForm.calculatorPage()}">
<f:ajax execute="#form" render="#form"/>
</h:commandLink>
</h:form>
I use this CSS code to style the table:
.data_table_pricing {
border-spacing: 12px;
border-collapse: separate;
width: 100%;
}
I need to find a way to fix the size the columns. When validation message appears the second column is pushed to the left.
Is there any way to fix the size of the columns?
Setting a fixed width to the td element prevents the column jump.
.data_table_pricing tbody tr td {
width: 33%;
}
Edit:
Solution for variable number of table columns and should be used over above method.
table.data_table_pricing {
table-layout: fixed;
}
I have a jsf page with 3 panels and each panel and columns are assigned css as below. I gave word wrap to each column b but sometimes word wrap does not work. I tried giving a width = 33% for each induvidual panel but still didnt seem to work. Can anyone help me on this?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<style>
.shadowpanel.ui-panel .ui-panel-content {
border-radius: 5px;
background: #E6ECF0;
box-shadow: 5px 5px 5px #888888;
}
.ui-chkbox-box
{
background: white !important;
}
.columnA{}
.columnBwithwordBreak{
width:60%;
word-wrap: break-word;
}
</style>
<p:panel styleClass="shadowpanel" style="border: none">
<h:panelGrid columns="3" styleClass="topVerticalAlign" >
<h:panelGrid>
<p:panelGrid style="width: 100%;font-size: 15px;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="Dump Header" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="2" style="" columnClasses="columnA,columnBwithwordBreak">
<h:outputText style="font-weight: bold;white-space: pre" value="Sequence ID of Dump : " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(0)}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Dump Date: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(1)}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Dump Time: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().headVal.get(2)}" styleClass="courierFont" />
</h:panelGrid>
</h:panelGrid>
<h:panelGrid>
<p:panelGrid style="width: 100%;font-size: 15px;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="Cover Page" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="2" style="" columnClasses="columnA,columnBwithwordBreak" >
<h:outputText style="font-weight: bold;white-space: pre" value="Size of SVM: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().svm}" styleClass="courierFont" />
<h:outputText style="font-weight: bold;white-space: pre" value="Number of Active I Streams: " />
<h:outputText style="" value="#{postProcessedDump.getRegisterData().aci}" styleClass="courierFont"/>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid style="" styleClass="topVerticalAlign">
<h:panelGrid>
<p:panelGrid style="font-size: 15px; width:100%;">
<p:row>
<p:column style="text-align: center;font-weight: bold;">
<h:outputText value="General Registers" style="color: #1484e6 "/>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGrid columns="8" style="" columnClasses="columnA,columnBwithwordBreak,columnA,columnBwithwordBreak,columnA,columnA,columnBwithwordBreak,columnA" >
<h:outputText style="font-weight: bold;white-space: pre" value="R0:" />
<p:commandLink style="color: #1484e6" action="#{coverPageProcess.newReg}" update="currentRegisterValue,regName" value="#{postProcessedDump.getRegisterData().regValues[0]}">
<f:setPropertyActionListener target="#{registerData.selectedRegister}" value="R0" />
</p:commandLink>
<h:outputText style="font-weight: bold;white-space: pre" value="R1:" />
<p:commandLink style="color: #1484e6" action="#{coverPageProcess.newReg}" update="currentRegisterValue,regName" value="#{postProcessedDump.getRegisterData().regValues[1]}">
<f:setPropertyActionListener target="#{registerData.selectedRegister}" value="R1" />
</p:commandLink>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</ui:composition>
I removed the white-space: pre; property from the css, and it works well now.
You can see, that the distance bewteen email and the email is equal to the distance of member since and the date.
My code for this (using jsf-2):
<h:outputText value="email" />
<p:spacer width="50" height="10" />
<h:outputText value="sasdrftg#rfghre.de" />
<br></br>
<h:outputText value="member since" />
<p:spacer width="50" height="10" />
<h:outputText value="#{userUtilityBean.user.registered.time}">
<f:convertDateTime type="both" dateStyle="short" />
</h:outputText>
My css is simple:
.form-userdata {
position: absolute;
left: 30% !important;
color: blue !important;
}
How can I align the email to the "x-position" of the date?
For such kind of information presentation, use a h:panelGrid instead
<h:panelGrid columns="2">
<h:outputText value="email" />
<h:outputText value="sasdrftg#rfghre.de" />
<h:outputText value="member since" />
<h:outputText value="#{userUtilityBean.user.registered.time}">
<f:convertDateTime type="both" dateStyle="short" />
</h:outputText>
</h:panelGrid>
The page has a h:panelGrid which contains two h:panelGroup expected to be displayed in the same line.
And additional requirement is that the left panelGroup should be 30% of the total width,the other 70%.
I have tried a couple of ways to make this happen but failed...
<h:form id="form">
<h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="columnClazz" rowClasses="rowClazz">
<h:panelGroup>
<p:dataTable scrollHeight="250" id="priceData" var="item" value="#{accumByCustomerViewModel.quoteInfo}"
scrollable="true" rowIndexVar="rowInfo" rowKey="#{item.brand_code}" selection="#{accumByCustomerViewModel.selectedBrand}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{accumByCustomerViewModel.onRowSelect}"
update=":form:custGrid"/>
<p:columnGroup id="columnGroup" type="header">
<p:row>
<p:column id="goldHeader" rendered="true" headerText="积存金" colspan="4"/>
</p:row>
<p:row>
<p:column id="brandHeader" rendered="true" headerText="品牌"/>
<p:column id="quoteDateHeader" rendered="true" headerText="报价日期"/>
<p:column id="salePriceHeader" rendered="true" headerText="卖出价"/>
<p:column id="redeemPriceHeader" rendered="true" headerText="赎回价"/>
</p:row>
</p:columnGroup>
<p:column id="brand_code" rendered="true">
#{item.brand_name}
</p:column>
<p:column id="quote_date" rendered="true">
#{item.quote_date}
</p:column>
<p:column id="salePrice" rendered="true">
#{item.entity_sale_price}
</p:column>.
<p:column id="redeemPrice" rendered="true">
#{item.entity_redeem_price}
</p:column>
</p:dataTable>
</h:panelGroup>
<h:panelGroup id="custGrid">
<p:fieldset legend="客户信息" id="custFieldset">
<h:panelGrid columns="2">
<h:outputText value="银行账号:"/>
<p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件类型: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件号码: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="品牌" id="brandFieldset">
<h:panelGrid columns="2">
<h:outputText value="品牌名称:"/>
<h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
<h:outputText value="金额: "/>
<p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
</h:panelGroup>
</h:panelGrid>
</h:form>
Declare your <h:panelGroup> in <h:panelGrid>as
<h:panelGroup style="width: 30%;" layout="block">
<h:panelGroup style="width: 70%;" layout="block">
so they get rendered as <div>s, without it they are rendered as <span> and as such they do not keep their width. It worked for me.
In your case:
I used the following code:
<style>
.one{width: 70%; border: 1px solid red;}
.two{width: 30%; border: 1px solid red;}
</style>
<h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="one, two">
<h:panelGroup layout="block">
<table style="width:100%;">
<tr>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
</tr>
<tr>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
</tr>
<tr>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
<td>kuba</td>
</tr>
</table>
</h:panelGroup>
<h:panelGroup id="custGrid" layout="block">
<p:fieldset legend="客户信息" id="custFieldset">
<h:panelGrid columns="2">
<h:outputText value="银行账号:"/>
<p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件类型: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
<h:outputText value="证件号码: "/>
<h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="品牌" id="brandFieldset">
<h:panelGrid columns="2">
<h:outputText value="品牌名称:"/>
<h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
<h:outputText value="金额: "/>
<p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
</h:panelGrid>
</p:fieldset>
</h:panelGroup>
</h:panelGrid>
to get an output like that:
take a closer look at this part of code: columnClasses="one, two"
Use only panelGroups with following properties, working desired.
<h:panelGroup style="width: 100%; float: left;">
<h:panelGroup style="display: inline-table; width: 30%; float: left;">Leftside Content</h:panelGroup>
<h:panelGroup style="display: inline-table; width: 70%; float: left;">Rightside Content</h:panelGroup>
</h:panelGroup>