How to align a particular cell inside a h:panelGrid in jsf 2.0. I am able to align whole table by adding style in the h:panelGrid. But I need only one cell to be aligned center.
Thanks
Brajesh
If you want to say that you need only one column (through the word cell) to be aligned center, use columnClasses
<h:panelGrid columns="3" columnClasses="basicStyle, centerStyle, basicStyle"
CSS
.basicStyle {
/*text-align: inherit; optinal*/
}
.centerStyle{
text-align: center;
}
Edit: Align only one cell
Declare a new grid just for the cell you want to align:
<h:panelGrid columns="2" width="800px">
<h:outputText value="#test" />
<h:outputText value="#test" />
<h:panelGrid columnClasses="centerStyle" width="100px">
<h:outputText value="#test" />
</h:panelGrid>
<h:outputText value="#test" />
<h:outputText value="#test" />
<h:outputText value="#test" />
</h:panelGrid>
Related
I would like to align all the input fields. I used JSF panelGrid. See in the attached image, when the last 3 fields are aligned correctly, but the first one moved slightly left. I did all possible attempts I could, but failed to align the first input field. Please, help me out.
JSF Problem marked image
My Code:
<h:form id="MF">
<%--Form container Start--%>
<div align="center" class="form-align">
<div align="left" class="block-align use-border" style="width:80%">
<div align="left" class="block-align" style="width:100%">
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:outputText id="lbl1" styleClass="lbltxt" value="#{---}" style="width:200px;" />
</h:column>
<h:column>
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:inputText id="txt1" value="#{---}" styleClass="inputfld" size="10" maxlength="6" onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)" onkeyup="keyUpEvents(this)"/>
</h:column>
<h:column>
<h:outputLabel id="outlbl1" for="txt1" styleClass="lbltxt" />
</h:column>
</h:panelGrid>
</h:column>
</h:panelGrid>
</div>
</div>
<br>
<%---------------------------------------------------------------------------------------------------------%>
<div align="left" class="block-align use-border" style="width:80%">
<div align="left" class="block-align" style="width:100%">
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:outputText id="lbl2" value="#{---}" styleClass="lbltxt" style="width:200px;" />
</h:column>
<h:column>
<h:inputText id="txt2" value="#{---}" styleClass="inputfld" size="10" readonly="true"/>
</h:column>
<h:column>
<h:outputText style="text-align:left;" id="lbl3" styleClass="lbltxt" value="#{---}" />
</h:column>
<h:column>
<h:inputTextarea id="txt3" value="#{---}"
styleClass="inputfld" rows="10" cols="65"
onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
</h:inputTextarea>
</h:column>
<h:column>
<h:outputText id="lbl4" value="#{---}" styleClass="lbltxt" style="width:200px;" />
</h:column>
<h:column>
<h:inputTextarea id="txt4" value="#{---}"
styleClass="inputfld" rows="10" cols="65"
onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
</h:inputTextarea>
</h:column>
</h:panelGrid>
</div>
</div>
<%--Non Container End--%>
</div>
</h:form>
My guess is your labels exeed the width of 200px in the lower table.
You should add another styleclass to all labels (h:outputText) defining the width and also the min-width. set the value as big as the widest label in your tables you want to align.
You should also avoid styling elements directly, if possible, to save yourself and others working on this code from unnessesary messy and inconsistent style.
I need to print a treeTable's content. The problem is that not all columns are displayed/printed. The treeTable have 4 columns and only 2 are printed (truncating)
How to print the complete treeTable's content? Is possible to customize page layout (portrait/landscape)?
<p:commandButton value="Print"
type="button"
icon="fa fa-print">
<p:printer target="treeTable" />
</p:commandButton>
<p:treeTable id="treeTable"
value="#{myMB.root}"
var="obj"
resizableColumns="true"
style="width:100%">
<p:column headerText="Column Label 1" style="width:40%">
<h:outputText value="#{obj.label1}" />
</p:column>
<p:column headerText="Column Label 2" style="width:20%">
<h:outputText value="#{obj.label2}" />
</p:column>
<p:column headerText="Column Label 3" style="width:20%;text-align: center;">
<h:outputText style="float: center;" value="#{obj.label3}" />
</p:column>
<p:column headerText="Column Label 4" style="width:20%">
<h:outputText style="float: left;" value="U$" rendered="#{not empty obj.label4}" />
<h:outputText style="float: right;" value=" #{obj.label4}" rendered="#{not empty obj.label4}" />
</p:column>
Primefaces 5.3 and Wildfly 10
[]'s
I am using Primefaces 5 and with a Group data table with more than 150 columns. I am trying to set each column width manually. I tried the threads here, but still primefaces is auto adjusting my column widths to show all columns in one screen without any horizontal scrolling. I am looking for one place to set the column width in px or %.
I am not sure how to approach with Group Heading.
I tried so far:
resizableColumns="true" style="table-layout: fixed"
Set style="width:auto" and
set in css:
.repoTab.ui-datatable table { width: auto !important; }
My xhtml here:
<h:form>
<p:dataTable id="userTable" value="#{userDAO.data}" var="ub"
binding="#{userBean.dataTable}" paginator="true" rows="500"
resizableColumns="true" style="table-layout: fixed">
<f:facet name="header">
<p:toolbar>
<!-- Header Codes Here -->
</p:toolbar>
</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column colspan="3" headerText="Application" style="width:auto" />
<!-- <p:column colspan="6" headerText="Primary" width="100%" /> -->
</p:row>
<p:row>
<!-- ************ Application ************* -->
<p:column colspan="3" headerText="Key" style="width:auto" />
<!-- ************ Primary ************* -->
</p:row>
<p:row>
<!-- ************ Appl Key ************* -->
<p:column headerText="Id" width="50" />
<p:column headerText="F Name" width="150" />
<p:column headerText="L Name" width="150" />
</p:row>
</p:columnGroup>
<p:column headerText="Id" width="50">
<h:outputText value="#{userBean.dataTable.rowIndex+1}" />
</p:column>
<p:column headerText="First Name">
<h:outputText value="#{ub.firstName}" />
</p:column>
<p:column headerText="Last Name">
<h:outputText value="#{ub.lastName}" />
</p:column> -->
</p:dataTable>
</h:form>
</html>
Keep your table CSS style:
.ui-datatable table { width: auto !important; }
Remove the width attribute and set the min-width on the columns style:
<p:columnGroup type="header">
<p:row>
<!-- ... -->
</p:row>
<p:row>
<p:column headerText="Id" style="min-width: 50px;" />
<p:column headerText="F Name" style="min-width: 150px;" />
<p:column headerText="L Name" style="min-width: 150px;" />
</p:row>
</p:columnGroup>
Hope it helps.
I solved it by adding expandableRowGroups="true", then I could use the style property.
<p:dataTable expandableRowGroups="true" scrollable="true" >
<p:columnGroup type="header">
<p:row>
<p:column rowspan="2" headerText="txt" style="width:50px;" />
</p:row>
</p:columnGroup>
</p:dataTable>
I was using Primefaces 3.4. I recently upgraded to primefaces 4.0.
Below code was working fine in 3.4. However after I upgraded to 4.0, my table facet header doesn't align with the column headers.
<p:dataTable id="itunesTopSongsDt"
var="itunesTopSongsDtV"
value="#{applicationAccessMb.itunesTopSongsList}"
resizableColumns="false"
style="width: 600px; float: right; margin-right: 10px; margin-top: 0px;">
<f:facet name="header">
<p:row>
<p:column colspan="3">
<p:outputPanel style="float:left;">
<h:outputText id="itunesTopSongsDtHdr"
value="iTunes Top 10 Songs"/>
</p:outputPanel>
</p:column>
<p:column>
<p:outputPanel style="float:right;">
<p:selectOneMenu id="songsChartCountrySom"
value="#{applicationAccessMb.songChartCountry}"
effect="fade"
style="text-align: left">
<f:selectItems value="#{applicationAccessMb.reportCountry}"/>
<p:ajax process="songsChartCountrySom"
event="change"
listener="#{applicationAccessMb.getItunesTopSongsForCountry}"
update="itunesTopSongsDt"/>
</p:selectOneMenu>
</p:outputPanel>
</p:column>
</p:row>
</f:facet>
<p:column headerText="Rank"
width="30"
style="text-align: center;">
<h:outputText value = "#{itunesTopSongsDtV.rank}"/>
</p:column>
<p:column width="45">
<p:graphicImage url="#{itunesTopSongsDtV.imagePath}" width="45" height="45"/>
</p:column>
<p:column headerText="Artist"
width="200">
<h:outputText value = "#{itunesTopSongsDtV.artist}"
rendered="#{!itunesTopSongsDtV.itunesArtistLinkFound}"/>
<h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesArtistLink}',
'', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;"
rendered="#{itunesTopSongsDtV.itunesArtistLinkFound}">
<h:outputText value = "#{itunesTopSongsDtV.artist}"/>
</h:outputLink>
</p:column>
<p:column headerText="Title"
width="250">
<h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesLink}',
'', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;">
<h:outputText value = "#{itunesTopSongsDtV.title}"/>
</h:outputLink>
</p:column>
</p:dataTable>
See the pictures. Is there any setting I am missing which I need to do in primefaces 4.0
Thanks
Chirag
A very simple solution would be replace the outputPanel by an easy div with align
<div align="left">
<h:outputText id="itunesTopSongsDtHdr" value="iTunes Top 10 Songs"/>
</div>
Primefaces Datatable - 4.0
Remove all style
First Specified table size i.e 700px;
e.g <style="width:700px;float:left;">
or
Specified div
<div style="width:700px;">
<div>Write your Top ten album here </div>
<div>Write datatable here </div>
</div>
How can I center/align this checkbox and text horizontally?
<h:panelGroup>
<div>
<h:selectBooleanCheckbox id="deactivate" title="select to deactivate" />
<h:outputText value="${msg['deactivate/confirm']}" for="deactivate" />
</div>
</h:panelGroup>
You simply have to apply style="width: 500px;text-align: center;" like this :
<h:panelGroup layout="block" style="width: 500px;text-align: center;">
<h:selectBooleanCheckbox id="deactivate" title="select to deactivate" style="vertical-align: middle;" />
<h:outputText value="${msg['deactivate/confirm']}" for="deactivate" />
</h:panelGroup>
Of course, you must have a width in order to see a difference. Your div is not needed so I removed it.