I make an <p:inputTextArea> and i want to set Rows of that, but I don't know why it's not working. Here is my xhtml code :
<h:form id="contactUsForm">
<div class="ui-fluid p-formgrid p-grid">
<div class="p-field p-col-12">
<p:outputLabel style="font-size:16px !important;" for="email" value="Email"/>
<p:inputText id="email" value="#{contactUsBacking.email}"/>
</div>
<div class="p-field p-col-12">
<p:outputLabel style="font-size:16px !important;" for="question" value="Question"/>
<p:inputTextarea id="question" rows="4" value="#{contactUsBacking.question}"/>
</div>
</div>
</h:form>
Anyone can help me? Thank you!
Solved with add min-height on style Thank you!
Related
Here is my code.
Show Fields when click on command Link.
Code for Fields:
<div class="col-md-12 Spacing" style="margin-top: 1%;">
<div class="col-md-3" style="padding-top: 7px;">
<p:outputLabel styleClass="WhiteBlue" value="Ref#" /></div>
<div class="col-md-9">
<p:inputText type="text" styleClass="form-control" required="false" requiredMessage="required" value="#{pmBean.addpfmworkorderhead.refno}" id="refno" disabled="true"/>
</div>
</div>
Code for Link:
<p:commandLink oncomplete="PF('dlgwwv').show();"
action="#{pmController.createWorkOrderFromRca}" process="#this" update="AddNewEntryDialog:RcaDialog" id="rd">
<h:graphicImage name="images/AttachDetails.gif" style="margin-left: 1%;"
title="Create Work Order with reference to RCA" />
</p:commandLink>
I want to divide a web page made with JSF in two columns, but I'm having problems as it's not displayed as I want. I'll show you what I have.
<h:panelGrid id="panelPpal" columns="2" style="width: 100%">
<h:panelGrid style="width: 100%">
<h:form id="projectForm" class="form-horizontal">
<div class="form-group">
<h:outputLabel id="lblProjectName"
value="#{rDisenyo['seccion.crea.nombre']}"
for="projectName"
class="col-md-3 control-label"/>
<div class="col-md-6">
<h:inputText id="projectName" label="Nombre"
value="#{newProjectBacking.nombreProyecto}"
class="form-control"/>
</div>
</div>
<div class="form-group">
<h:outputLabel for="grosorCristal" value="#{rDisenyo['dialog.avanzadas.grosorCristal']}"
class="col-md-3 control-label"/>
<div class="col-md-6">
<h:selectOneMenu id="grosorCristal"
class="form-control"
label="Grosor del Cristal"
value="#{newProjectBacking.grosorCristal}"
required="true" >
<f:selectItem itemLabel="----------" itemValue="0"/>
<f:selectItem itemLabel="8 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="8"/>
<f:selectItem itemLabel="10 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="10"/>
<f:selectItem itemLabel="12 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="12"/>
</h:selectOneMenu>
</div>
</div>
<div class="form-group">
<h:outputLabel for="ralMenu" id="ralLbl"
value="#{rDisenyo['proyecto.opcionesprevias.ral']}"
class="col-md-3 control-label"/>
<div class="col-md-6">
<h:selectOneMenu id="ralMenu" class="form-control"
value="#{newProjectBacking.ral}"
>
<f:selectItem itemLabel="" itemValue="0"/>
<f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.blanco']}" itemValue="1"/>
<f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.crudo']}" itemValue="2"/>
<f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.anodizado']}" itemValue="3"/>
</h:selectOneMenu>
</div>
</div>
</h:form>
</h:panelGrid>
<h:panelGrid style="width: 100%">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">#{rDisenyo['instrucciones.title']}</h3>
</div>
<div class="panel-body">
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.angulos.grados']}
</div>
#{rDisenyo['instrucciones.angulos.linea1']}<br/>
#{rDisenyo['instrucciones.angulos.linea2']}<br/>
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.longitud.title']}
</div>
#{rDisenyo['instrucciones.longitud.linea1']}<br/>
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.altura.title']}
</div>
#{rDisenyo['instrucciones.altura.linea1']}<br/>
<div class="subtitulo-instruciones">
#{rDisenyo['instrucciones.recogenizq.title']}
</div>
#{rDisenyo['instrucciones.recogenizq.linea1']}<br/>
</div>
</div>
</div>
<div class="col-md-8">
Eliga el tipo de proyecto:
<h:selectOneRadio id="tipoProyectoRadioButton" value="#{newProjectBacking.tipoProyecto}">
<div class="radio">
<f:selectItem itemValue="1" itemLabel="Proyecto A" />
</div>
<div class="radio">
<f:selectItem itemValue="2" itemLabel="Proyecto B" />
</div>
<div class="radio">
<f:selectItem itemValue="3" itemLabel="Proyecto C" />
</div>
</h:selectOneRadio>
</div>
</h:panelGrid>
</h:panelGrid>
As you can see, there are two parts in my app: the left one is a form and the right one has instructions and a different form (I know that it isn't yet inside a h:form). I want the right panel to start in the center of the window, but I don't know how to do it. Thank you!
I've found a solution here: How to divide a Twitter bootstrap modal into 2 parts
<div class="modal-body row">
<div class="col-md-6">
<!-- Your first column here -->
</div>
<div class="col-md-6">
<!-- Your second column here -->
</div>
</div>
Bootstrap is set up on a grid system, so you can span a total of 12 grids across. The easiest way to think of this, is divide your screen into 3 sections of equal amounts of 4 across. As long as your total columns add up to 12, it will balance out and display properly onto the screen. For centering the column, use the bootstrap class called "text-center". This makes all content within that div center within the column its' self.
Example:
<div class = "col-md-6 text-center">
<!-- Content goes here -->
</div>
<div class = "col-md-6 text-center">
<!-- Content goes here -->
</div>
The above will divide your content into two equal columns and center all the content enclosed within the div.
For a more visual representation of the grid system (i recommend checking this out), look here: http://getbootstrap.com/2.3.2/scaffolding.html
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 huge tree component in my primefaces application. The tree has hundreds of nodes and I want the tree to have fixed height in my UI with vertical scroll to navigate the nodees.
Can someone help me figure this out?
Thanks
Put that tree in a panel and then apply style to that panel. For example:
<p:outputPanel style="width: 100%;height: 100px;overflow: auto;display: block">
<p:tree value="#{bean.root}">
<p:treeNode>
<h:outputText value="#{doc}" />
</p:treeNode>
</p:tree>
</p:outputPanel>
I use p:scrollPanel
<p:scrollPanel style="height:450px;width:500px;">
<p:tree ...>
</p:tree>
</p:scrollPanel>
p:scrollPanel does not work well.
Use: p:layout
Here an example:
<p:layout style="max-width:800px;min-height:300px;width:800px;height:300px;">
<p:layoutUnit position="north">
<p:panelGrid columns="2" columnClasses="label,value"
style="text-align:left;">
<p:outputLabel value="Nombre:" for="nombre" />
<p:outputLabel id="nombre"
value="#{segPerfilBean.currentObject.segPerNombre}"
title="Nombre" />
</p:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:panelGrid id="catalogContent" style="width: 100%;">
<p:tree value="#{segPerfilBean.rootOpciones}" var="doc"
disabled="true" readOnly="true" selectionMode="checkbox"
selection="#{segPerfilBean.selectedNodes}"
style="width:100%;height:100%;">
<p:treeNode type="perfil">
<h:outputText value="#{doc.segPerNombre}" />
</p:treeNode>
<p:treeNode type="modulo">
<h:outputText value="#{doc.segModNombre}" />
</p:treeNode>
<p:treeNode type="opcion">
<h:outputText value="#{doc.segOpcNombre}" />
</p:treeNode>
</p:tree>
</h:panelGrid>
</p:layoutUnit>
</p:layout>
<p:tree value="#{bean.root}"
style="width: 100%;height: 100px;overflow: auto;display: block">
<p:treeNode>
<h:outputText value="#{doc}" />
</p:treeNode>
</p:tree>`
So I found a way to make this work. However, I will admit upfront it was not my dream solution. But then I have only so much time to play around as this is a bit of a pet project for me:
I created two instances of the table with the same definitions and used fixed header widths. I then placed each table one after the other in individual divs. I then style those divs:
#header {
height: 24px;
}
#body thead {
display: none;
}
and then the I have a sample of simple tables and divs below:
<div id="header">
<p-treeTable [value]="[]">
<p-column field="key" header="Key" [style]="{'width':'30%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.key }}
</ng-template>
</p-column>
<p-column field="key" header="Key" [style]="{'width':'70%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.big }}
</ng-template>
</p-column>
</p-treetable>
</div>
<div id="body">
<p-treeTable [value]="treedata">
<p-column field="key" header="Key" [style]="{'width':'30%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.key }}
</ng-template>
</p-column>
<p-column field="key" header="Key" [style]="{'width':'70%'}">
<ng-template let-row="rowData" pTemplate type="body">
{{ row.data.big }}
</ng-template>
</p-column>
</p-treetable>
</div>
What I think helped is ensuring I set the width on each column so I could ensure I got the same column width during display. I also set the treedata to [] or empty for the header so I do not process the data two times. This is a bit inelegant. And I would sure have liked to add scrolling directly to the treetable but time is not available.
Also to have the table itself scroll. use something like:
.ui-treetable-tablewrapper {
overflow-y: scroll;
height: 290px;
}
NOTE: I have no idea how to get the height so a row is not a bit clipped. As it seems the row height for expanded rows is not identical to that of unexpanded rows.
If you place this in a bootstrap panel with a footer and no padding it looks good, albeit not perfect:
<div class="panel panel-default">
<div class="panel">
<div class="panel-heading">
...header...
</div>
<div class="panel-body" style="{ padding: '0' }">
...Table...
</div>
<div class="panel-footer">
<div class="row">
....footer...
</div>
<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.