I have a panel grid with two columns and I want to align the right column text in the center and the left column text to the left.
I try to play with it over and over but still it’s not working
<pe:layoutPane position="south" resizable="false" closable="false" statusbar="true" spacing="0">
<h:panelGrid columns="2" styleClass="left,centered" width="100%">
<h:outputText value="DEV"/>
<h:panelGroup>
<h:outputText value="Developed by "/>
<h:outputLink id="link1" value="mailto:to#mm.com" >
<h:outputText value="text" style="text-decoration:underline"/>
</h:outputLink>
</h:panelGroup>
</p:panelGrid>
</pe:layoutPane>
Here is the css:
.centered {
margin: 0px auto;
text-align: center;
}
.left {
float: left;
}
Any idea how could I archive this layout ??
Thanks
you should better use
<h:panelGrid columns="2" columnClasses="left,centered">
...
</h:panelGrid>
greetings!
I found the solution :)
<center>
<h:outputText value="DEV" style="float: left" styleClass="footer"/>
<h:outputText value="xxxxxxx" styleClass="footer"/>
<h:outputLink id="link1" value="mailto:xxxx#xxxx" styleClass="footer">
<h:outputText value="xxx" style="text-decoration:underline" styleClass="footer"/>
</h:outputLink>
</center>
Related
I have a selectOneRadio element with layout="custom" inside a dataTable. Below is the xhtml code-
<p:dataTable var="varlist" value="#{testbean.testlist}">
<p:column headerText="Choose Option" width="120">
<p:selectOneRadio id="customRadio" value="#{varlist.varlistValue}"
layout="custom" required="true">
<f:selectItem itemValue="10" />
<f:selectItem itemValue="20" />
</p:selectOneRadio>
<h:panelGrid columns="1">
<h:panelGroup>
<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
<h:outputLabel for="opt1" value="OPTION 1" styleClass="radiolabelOption"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
<h:outputLabel for="opt2" value="OPTION 2" styleClass="radiolabelOption"/>
</h:panelGroup>
</h:panelGrid>
</p:column>
</p:dataTable>
<style type="text/css">
.radiolabelOption {
margin-left: 10px;
}
</style>
So this is how it appears in browser-
As we can see, the outputLabel appears to the bottom with respect to radioButton. But i want that to look centre, w.r.t radioButton as shown below -
I tried below lines of code like
style="display:block; text-align:center" OR
style="margin: 0 auto;"
But none of them produces the desired result.
So How to do it?
Give <h:panelGroup> these styles
.panelGroup{
display: flex;
align-items: center;
}
I am using a PrimeFaces dialog. I have just a few elements there. A dataTable and 2 buttons (Ok and Cancel).
But buttons are displayed on bottom, and are visible only when I scroll down the whole table. I want them to be always displayed on bottom, no matter if I am on first or last row.
I search a lot but didn't find anything that works.
Here is snippet from my code:
<f:facet name="{SelectPrijemca}">
<div class="Fs14 Absolute" style="right: 11px; top: 4px">
<p:outputLabel value="#{MAService.selectedPrijemca.nazO}" style="color:white"/>
<p:spacer width="7px"/>
<p:commandButton value="Príjemca" id="selectPrijemcaButton" icon="fa fa-user" rendered="#{MAService.managerAccess}"
onclick="PF('PrijemcaDialogWidget').show();" style="margin-top:2px">
</p:commandButton>
</div>
<p:dialog id="PrijemcaDialog" header="Vybrať príjemcu" widgetVar="PrijemcaDialogWidget" showEffect="fade" hideEffect="fade" height="600" width="1300" position="center" modal="false" resizable="false" >
<h:form id="prijemcaForm">
<p:dataTable
id="prijemcaTable"
scrollable="false"
var="prijemca"
widgetVar="prijemcaTableWidget"
value="#{MAService.prijemcoviaList}"
selectionMode="single"
filteredValue="#{MAService.filteredPrijemcovia}"
emptyMessage="#{messages.localizeEShop('webclient$datatable.tableEmpty')}"
selection="#{MAService.selectedPrijemca}"
rowKey="#{prijemca.id}" >
<p:column width="50"
filterBy="#{prijemca.nazO}" filterMatchMode="contains"
filterStyleClass="narrowEdit"
headerText="#{messages.localizeEShop('webclient$subfiles.lo.LOObjWeb.cols.PrijNaz')}"
sortBy="#{prijemca.nazO}" styleClass="TexAlLeft"
style="white-space: nowrap !important;>
<h:outputText value="#{prijemca.nazO}" styleClass="TexAlLeft" style="color: gray"/>
</p:column>
<p:column width="5"
filterBy="#{prijemca.ici}" filterMatchMode="contains"
filterStyleClass="narrowEdit"
headerText="#{messages.localizeEShop('webclient$subfiles.lo.LOObjWeb.cols.PrijIci')}"
sortBy="#{prijemca.ici}" styleClass="TexAlLeft"
style="white-space: nowrap !important;>
<h:outputText value="#{prijemca.ici}" styleClass="TexAlLeft" style="color: gray"/>
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<p:commandButton value="OK" icon="fa fa-check" process="prijemcaForm" actionListener="#{MAService.changePrijemca()}" update="contentForm"/>
<p:commandButton value="Zrušiť" icon="fa fa-times" onclick="PF('PrijemcaDialogWidget').hide()" style="background-color:red"/>
</p:panelGrid>
</h:form>
</p:dialog>
</f:facet>
And just one note, I can not make dataTable scrollable, because I use this facet in paginatorTemplate of another dataTable and it somehow makes scrollable all the page where is this table.
I found one partial solution when I wrapped panelGrid where buttons are with:
<div style="position: fixed; width: 65%; top: 70%; left: 16%></div>
But this doesn't fix buttons in dialog but on whole page. So when there is way how to make dialog not movable (draggable) I could go this way.
try to put your datatable in an outputPanel and style it with
<p:outputPanel id="opScrl" style="height:560px;overflow:auto">
<p:dataTable ...>
</p:dataTable>
</p:outputPanel>
I am having a rich data table's column like below:
<h:panelGrid columns="2" width="100%"
style="text-align: center;line-height:0px;">
<h:outputText value="*" style="font: bold 19px;color: red;position: relative;margin:0;padding:0;"
rendered="#{s:isNotNumber(forecastList.rasMap[mapElements])}"></h:outputText>
<h:inputText value="#{forecastList.rasMap[mapElements]}"
readonly="true" onfocus="captureFocus(this,this.form);"
size="15"
style="#{s:contains(forecastList.rasMap[mapElements],'-') ? 'color: red;' : ''};
text-align: right; vertical-align: middle;background-color: white;margin:0;padding:0;"
label="For #{forecastList.currencySymbolRas} - #{mapElements},">
<s:bigDecimalConverter decimalDigits="2" />
</h:inputText>
</h:panelGrid>
However i am not able to remove the space between the asterik and input text box. I want them near to each other.
Remove width="100%" and (optionally) add additional attributes in h:panelGrid:
<h:panelGrid columns="2" border="0" cellpadding="0" cellspacing="0">
Try this:
<h:outputText value="*" >
</h:outputText><h:inputText ... />
I have a multi column form that I need to display and I used the JSF panelGrid component like this. each panelgrid is within a primefaces p:panel element
<h:panelGrid columns="6" cellpadding="1" cellspacing="1" style="width: 100%" columnClasses="column1">
my column1 in CSS is:
.column1 {
width: 14%;
}
It renders on screen like image below. Notice the columns within the panels are not aligned and it looks haphazard. How can I align the form elements/labels in a uniform manner and also get rid of the spaces and padding to make the form layout more compact.
Thanks in Advance BaluSC if you answer! You really are the king of JSF:-)
I also have a multi-column form using JSF PanelGrid.
<h:panelGrid id="panelGrid" columns="4" cellpadding="3"
columnClasses="colLeft,colRight,colLeft,colRight">
<p:outputLabel for="username" value="Username" />
<p:inputText id="username" value="#{myBean.user.username}"
required="true" />
<p:outputLabel for="fullName" value="Full Name" />
<p:inputText id="fullName" value="#{myBean.user.fullName}"
required="true" />
<p:outputLabel for="password" value="Password" />
<p:password id="password" value="#{myBean.user.password}"
required="true" match="passConfirm" />
<p:outputLabel for="passConfirm"
value="Re-type Password" />
<p:password id="passConfirm" value="#{myBean.user.password}"
required="true" />
</h:panelGrid>
Here is CSS.
#panelGrid {
width: 100%;
}
.colLeft {
width: 15%;
}
.colRight {
width: 35%;
}
Here is output.
Hope it works!
I see there are some answers posted for this. tried almost all of them with several permutation-combination.. but nothing seems to be working.
components inside panelgris are always middle aligned, instead of top.
tried whatever they said in the below post.
How to control alignment of DataTable inside of a PanelGrid?
Please let me know if there is a remedy.
The <h:panelGrid> renders a HTML <table> element. The vertical alignment of a table cell <td> defaults indeed to middle. You want to make it to be top instead. This is easy with CSS.
<h:panelGrid styleClass="foo">
with
.foo td {
vertical-align: top;
}
If you have a table inside the panelgrid for which you'd like to keep the default table cell vertical alignment of middle, then you need to alter the CSS as follows:
.foo>tbody>tr>td {
vertical-align: top;
}
so that only the panelgrid's own table cells are top aligned.
To learn all about CSS, check http://www.csstutorial.net.
Use the panelGrid's columnClasses attribute to identify a CSS class that includes the vertical-align: top; style:
<h:panelGrid columns="2" columnClasses="topAligned">
...
</h:panelGrid>
and the CSS file:
.topAligned {
vertical-align: top;
}
The contents of the first column in the panelGrid will then be top-aligned within their cells.
Use the styleClass for the panelGrid as in the following example code:
<h:panelGrid columns="2" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" />
</h:panelGrid>
Then in the css configure as follows:
.top-aligned-columns td{
vertical-align: top;
}
With this method you will be able to not only top-align the rows but you can also apply the same styleClass to other panelGrids within the encompassing panelGrid.
For example:
<h:panelGrid columns="3" styleClass="top-aligned-columns" cellpadding="5" style="display:block" cellspacing="5">
<p:panel id="pnlApplicant" header="#{resources['ApplicantHeader']}" styleClass="no-border">
<h:panelGrid columns="2" cellpadding="5" style="display:block" cellspacing="5" styleClass="top-aligned-columns">
<p:outputLabel value="#{resources['IDNumber']}" />
<p:inputText id="txtIDNumber" value="#{applicantBean.personal.idNumber}" >
<p:ajax event="change" process="#this" update="tvQuickScore"/>
</p:inputText>
<p:outputLabel value="#{resources['Name']}" />
<p:inputText id="txtFirstname" value="#{applicantBean.personal.firstName}" />
<p:outputLabel value="#{resources['Surname']}" />
<p:inputText id="txtSurname" value="#{applicantBean.personal.lastName}" />
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:panel>