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>
Related
I would like to have the following fields horizontally, side by side. I can't get this to stay horizontal and this isn't pretty.
Currently, I have the following fields vertically (see attached image)
<div class="card">
<div class="card">
<h5>Filters</h5>
<div class="field col-12 md:col-6">
<p:outputLabel for="test1" class="p-col-12 p-md-1">#{sms['test.test1']}</p:outputLabel>
<div class="p-col-12 p-md-11">
<p:selectOneMenu id="test1" value="#{testView.test1IdFilter}" styleClass="wp15">
<f:selectItem itemLabel="#{sms['selection.option']}" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{selectorTest1Controller.entities}" />
<p:ajax event="valueChange" listener="#{testView.filterTests}" update=":form"/>
</p:selectOneMenu>
</div>
</div>
<div class="field col-12 md:col-6">
<p:outputLabel for="test2" class="p-col-12 p-md-1">#{sms['test.test2']}</p:outputLabel>
<div class="p-col-12 p-md-11">
<p:selectOneMenu id="test2" value="#{testView.test2IdFilter}" styleClass="wp15">
<f:selectItem itemLabel="#{sms['selection.option']}" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{selectorTest2Controller.entities}" />
<p:ajax event="valueChange" listener="#{testView.filterTests}" update=":form"/>
</p:selectOneMenu>
</div>
</div>
<div class="field col-12 md:col-6">
<p:outputLabel for="test3" class="p-col-12 p-md-1">#{sms['test.test3']}</p:outputLabel>
<div class="p-col-12 p-md-11">
<p:selectOneMenu id="test3" value="#{testView.test3IdFilter}" styleClass="wp15">
<f:selectItem itemLabel="#{sms['selection.option']}" itemValue="" noSelectionOption="true"/>
<f:selectItems value="#{selectorTest3Controller.entities}" />
<p:ajax event="valueChange" listener="#{testView.filterTests}" update=":form"/>
exemple-image
p:fileupload is fading image after fileUploadListener event.
Some code.
<p:dialog id="dialogIncluirArquivo2" rendered="true" header="Inclusão de arquivo" widgetVar="modalIncluirArquivo2"
resizable="false" closable="true" modal="false" width="750" height="auto">
<h:form id="formAnexo2" prependId="false" >
<div class="row">
<div class="col-md-2" style="padding-top: 8px;">
<p:fileUpload fileUploadListener="#{tombamentoFace.handleFileUploadArquivo}" mode="advanced" dragDropSupport="false"
multiple="true" fileLimit="10" fileLimitMessage="É permitido o envio de 10 arquivos por requisição"
invalidFileMessage="Arquivo inválido!" immediate="true"
label="Incluir Arquvio" invalidSizeMessage="Arquivo maior que 5mb não é permitido!"
sizeLimit="5000000" update="panel2" auto="true" />
</div>
<div class="col-md-6">
<h:outputText value="Arquivo:" style="font-weight: bold; margin-top: 10px;" class="pull-right"/>
</div>
<div class="col-md-4">
<h:commandLink actionListener="#{tombamentoFace.downloadAnexoArquivo(selectedArquivo)}" >
<h:outputText id="panel2" value="#{tombamentoFace.selectedArquivo.nome}" style="font-weight: bold; margin-top: 10px; " class="pull-left"/>
</h:commandLink>
</div>
</div>
<hr style="margin-bottom: 5px;"/>
<div class="row" style="padding-left: 15px;">
<div class="col-xs-5">
<p:commandButton value="Enviar arquivo" actionListener="#{tombamentoFace.vincularAnexoArquivo()}"
styleClass="btn btn-flat btn-success" style="color: #ecf0f1; height: 28px;" immediate="true" update="tab:table_arquivo " process="#this">
</p:commandButton>
<p:commandLink value="Cancelar" update="panel2" actionListener="#{tombamentoFace.cancelarAnexoArquivo()}" process="#this" immediate="true"/>
</div>
</div>
</h:form>
</p:dialog>
It is because it is uploading the file. If you don't want that change auto="true" to auto="false" and it won't automatically upload it and "fade the image" away.
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!
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
Hey can anyone help me out i am trying to display a div on screen depending on what i select on a drop-down menu
<------------DropdownDiv---------->
<div id="recordActivityDropdownDiv" style="padding: 5px">
<h:selectOneMenu id="recordActivityDropdown" style="width:200px;" value="">
<f:selectItem itemLabel="Email" itemValue="1"/>
<f:selectItem itemLabel="Letter" itemValue="2"/>
</h:selectOneMenu>
</div>
<------------Display this is letter is selected in dropdown menu Div---------->
<div style="height:100%; width:99%; float:left">
<div style="padding-top: 15px; padding-left: 5px; width: 20%; float: left;">
letter:
</div>
<div style="height:100%; width:77%; float:left">
<div style="padding: 5px; float:left;">
<h:inputText id="letterbox" style="width:200px" value="" />
</div>
</div>
As noted in the comments, your code would look a bit like this :
...
<h:selectOneMenu value="#{bean.selectValue} id="recordActivityDropdown" style="width:200px;" value="">
<f:selectItem itemLabel="Email" itemValue="1"/>
<f:selectItem itemLabel="Letter" itemValue="2"/>
<f:ajax listener="#{bean.valueChanged}" update="myGroup" />
</h:selectOneMenu>
...
...
<h:panelGroup id="myGroup" style="height:100%; width:99%; float:left">
<div style="padding-top: 15px; padding-left: 5px; width: 20%; float: left;">
letter: <h:outputText value="#{bean.selectValue}" />
</div>
...
</h:panelGroup>
...
This will update (via ajax) the now panelGroup that is your "div". It will take the value of the selectOneMenu and print it to the div.
See also :
Ajax support In h:selectOneMenu
how to get value from <h:selectOneMenu>?