Given the following <p:panelGrid>.
<p:panelGrid style="width: 25%;">
<p:row>
<p:column style="text-align: right;">
a
</p:column>
</p:row>
</p:panelGrid>
The text inside <p:column> is aligned right as can be seen below.
I need to display another <p:panelGrid> inside that <p:column> as follows.
<p:panelGrid style="width: 25%;">
<p:row>
<p:column style="text-align: right;">
<p:panelGrid>
<p:row>
<p:column>
b
</p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:row>
</p:panelGrid>
The style attribute text-align: right; of <p:column> has no effect in this case.
How to align the inner <p:panelGrid> right?
Since the panelGrid is a table you can float it to the right:
<p:panelGrid style="width: 25%;">
<p:row>
<p:column>
<p:panelGrid style="float: right">
<p:row>
<p:column>
b
</p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:row>
</p:panelGrid>
Apply the style on the inner panelgrid
<p:panelGrid style="text-align: right; display:inline-block">
Add class for the panel and apply the styles like below.
<p:panelGrid style="width: 25%;" styleClass="mytest">
<p:row>
<p:column>
<p:panelGrid>
<p:row>
<p:column>
b
</p:column>
</p:row>
</p:panelGrid>
</p:column>
</p:row>
</p:panelGrid>
CSS
.mytest td
{
text-align:right;
}
If not work then try the below.
.mytest td
{
float:right;
}
Related
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.
I have a panelgrid with 5 rows and 7 columns within and have tried to use colspan to line up the different components within the columns. I'll stick my xhtml below:
<p:panelGrid>
<p:row>
<p:column>
<p:row>
<p:column>
<p:outputLabel value="Job Status:" />
</p:column>
<p:column colspan="4">
<p:selectOneMenu value="#{myBean.jobStatus}">
f:selectItems here
</p:selectOneMenu>
</p:column>
<p:column>
<p:selectBooleanCheckbox id="cbRepetition"
value="#{myBean.isRepeatable}"
</p:selectBooleanCheckbox>
</p:column>
<p:column>
<p:outputLabel value="Terminate repetition of this job?" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Positions:" />
</p:column>
<p:column>
<p:spinner id="position1"
value="#{myBean.selectedPosition1}" />
</p:column>
<p:column>
<p:spinner id="position2"
value="#{myBean.selectedPosition2}" />
</p:column>
<p:column>
<p:spinner id="position3"
value="#{myBean.selectedPosition3}" />
</p:column>
<p:column>
<p:spinner id="position4"
value="#{myBean.selectedPosition4}" />
</p:column>
<p:column>
<p:outputLabel value="Occurrences:" />
</p:column>
<p:column>
<p:spinner id="occurrences"
value="#{myBean.selectedOccurrences}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Date/Time:" />
</p:column>
<p:column colspan="4">
<p:calendar id="dateTime" pattern="dd/MM/yyyy HH:mm"
value="#{myBean.selectedDateTime}">
</p:calendar>
</p:column>
<p:column>
<p:outputLabel value="Job Location:" />
</p:column>
<p:column>
<p:selectOneMenu id="locationDd"
value="#{myBean.selectedLocationId}">
<f:selectItem itemLabel="Select" itemValue="0" />
<f:selectItem itemLabel="Australia" itemValue="1" />
<f:selectItem itemLabel="Springfield" itemValue="2" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Comments:" />
</p:column>
<p:column colspan="6">
<p:inputTextarea />
</p:column>
</p:row>
</p:column>
</p:row>
</p:panelGrid>
I've refactored the code a little bit, for example the jobStatus selectOneMenu is actually a custom component I've created, but I'm confident this isn't the issue as it's been used elsewhere in my project without any trouble.
This panelGrid is sat within a panel within a form.
I'm hoping it is obvious what I am trying to achieve, but what I'm actually getting is as below:
I've used CSS to make the spinners smaller as they should be just big enough to fit an integer 0-9, but this has had no effect, any suggestions why things aren't dislpaying on the correct rows or things I can do to make them display as I wish?
Cheers.
I've realized I just needed to remove the initial <p:row> and <p:column> and it works fine.
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>
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" />
I have this problem :
here is the code :
<p:panelGrid styleClass="newArticlePanelGrid" >
<!-- __________________________________________row1________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Designation : " />
</p:column>
<p:column colspan="3" >
<p:inputText id="new-article-designation" style="width: 449px;"
value="#{articlesMB.article.designation}" required="true"
requiredMessage="designation requise" />
</p:column>
</p:row>
<p:row>
<p:column />
<p:column colspan="3" >
<p:message id="for-new-article-designation"
for="new-article-designation" display="text" />
</p:column>
</p:row>
<!-- __________________________________________row2________________________________________________ -->
<p:row>
<p:column>
<h:outputLabel value="Type : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-typeggg" required="true"
requiredMessage="type requis" converter="#{typeConverter}"
style="width:100%" value="#{articlesMB.article.type}">
<!-- <f:selectItem itemLabel="Selectionner Type" itemValue="" />-->
<f:selectItems value="#{articlesMB.listTypes}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
<p:column>
<h:outputLabel value="Unité : " />
</p:column>
<p:column>
<p:selectOneMenu id="new-article-unite" required="true"
widgetVar="uniteselect" requiredMessage="unité requise"
converter="#{uniteConverter}" style="width:100%"
value="#{articlesMB.article.unite}">
<!-- <f:selectItem itemLabel="Selectionner Unite" itemValue="" /> -->
<f:selectItems value="#{articlesMB.listUnites}" var="v"
itemLabel="#{v.libelle}" itemValue="#{v}" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column />
<p:column>
I don't know what I should do to reolve this problem : I tested width:100% but as you see it doesn't change
how can I resolve that ?
thank you in advance
The problem come from style="100%", it only change selectonemenu's width, you should set width for label inside selectonemenu(in this situation):
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
</style>
If you want set all selectonemenu:
<style type="text/css">
.ui-selectonemenu-label{
width:100% !important;
}
.ui-selectonemenu{
width:100% !important;
}
</style>
for more general, you can include in css file.
See also: What is the JSF resource library for and how should it be used?