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.
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 was trying to center the component in jsf page, it looks sth like this:
<p:panel header="Enter your credentials:" style="vertical-align:middle;">
<h:panelGrid columns="2" styleClass="panelGridCenter">
<h:outputText value="Login: " />
<p:inplace id="Login">
<p:inputText value="Enter login" />
</p:inplace>
</h:panelGrid>
</p:panel>
I've tried to enter sth like this:
style="vertical-align:middle;"
I've tried to use a css class (I've had almost no experience with css):
.panelGridCenter {
margin: 0 auto;
vertical-align:middle;
}
But it doesn't work.
Can you give me any examples or hints how to position this component (panel) in the center of the jsf page?
p - primefaces
thx in advance
Try below code I will hope this answer be your question
<h:form>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="outer_table">
<tr>
<td>
<table width="500" height="300" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<p:panel header="Login">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="username" />
<p:inputText id="username" value="#{loginBean.uname}" required="true" label="username"/>
<h:outputLabel for="password" value="password" />
<p:password id="password" value="#{loginBean.password}" required="true" label="password" />
<p:commandButton value="Login" action="#{loginBean.loginProject}" update=":growl"/>
</h:panelGrid>
</p:panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
css
<script type="text/css">
html, body
{
margin:0px;
padding:0px;
width:100%;
min-height:100%;
height:100%;
}
.outer_table
{
width:100%;
height:100%;
}
</script>
This may be irrelevant as I cannot answer your question, but a dialog (centered by default) looks pretty cool for a login-page:
<h:body>
<p:growl id="growl" life="5000" autoUpdate="true" showDetail="true" escape="false"/>
<h:form>
<p:dialog id="dialog" header="Login" footer="..." width="400" widgetVar="dlg" visible="true" closable="false" showEffect="clip" draggable="false" resizable="false" style="box-shadow: 7px 10px 5px #303030;">
<p:panelGrid columns="2" style="margin: 0 auto">
<h:outputText value="username:"/>
<h:inputText value="#{loginBean.username}" id="username"/>
<h:outputText value="password:"/>
<h:inputSecret value="#{loginBean.password}" id="password"/>
</p:panelGrid>
<p:commandButton id="button" value="Login" action="#{loginBean.doLogin}" style="float:right"/>
</p:dialog>
</h:form>
</h:body>
visible="true" makes the dialog show automatically after load.
Inspired by this article, also showing how to secure parts of the application.
I am not an expert but sharing my own experience. After putting the panel into form, try putting the form into div with style as below:
<div style="width:360px; margin: 10% auto 10% auto;">
<h:form>
....
</h:form>
</div>
I have a problem on a page with primefaces framwork, this is my fragment code:
<p:rowExpansion rendered="#{riepilogoExtra.approvato == '0'}" >
<p:panelGrid columns="3" style="width:50px; border: 0px" >
<h:outputText value="Ore" />
<h:outputText value="Minuti" />
<h:outputText value="Note" />
<p:inputText id="QTA_MASSIMAHH" value="#{riepilogoExtra.qtaMassimaHH}" size="1" />
<p:inputText id="QTA_MASSIMAMM" value="#{riepilogoExtra.qtaMassimaMM}" size="1" />
<p:inputTextarea id="NOTE" rows="2" cols="20" value="#{riepilogoExtra.note}" />
</p:panelGrid>
<p:commandButton
ajax="true"
id="update"
value="Salva"
update="#form"
action="#{riepilogoExtraResponsabileManagedBean.update(riepilogoExtra)}"
icon="ui-icon-check"
styleClass="ui-priority-primary" />
</p:rowExpansion>
hy,
if you have the problem for button don't work in the first click you must verify your console javascript you have error, resolve the problem and all is ok :)
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>