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>?
Related
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.
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'm using a p:selectOneMenu to render a list of values. When the user click in the p:selectOneMenu the list of values is being painted below a 'html object tag' that is used to show a PDF. In the image I've attached is possible to see what is my problem.
Here is the code:
<p:layout style="width:100%; height:100%; min-height: 600px;" id="layoutShowScannedDocs" >
<p:layoutUnit position="center" >
<p:outputPanel id="opScannedDoc" style="width: 100%; height: 100%; margin: 0px; padding:0px; z-index:20;">
<object id="iframescanneddoc" type="application/pdf" width="100%" data="...url.." />
</p:outputPanel>
</p:layoutUnit>
<p:layoutUnit position="south" size="60" >
<div style="width: 100%; text-align: center;">
<p:selectOneMenu id="listOfValues" widgetVar="listOfValues" value="#{MyBean.selectedValue}" style="float:center;" >
<p:ajax event="change" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_original}" itemValue="1" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_cambioformato}" itemValue="2" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_docpapel}" itemValue="3" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_parcial}" itemValue="4" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_otros}" itemValue="5" />
</p:selectOneMenu>
</div>
</p:layoutUnit>
</p:layout>
What could I do to see the list of values of the p:selectOneMenu over the 'html object tag'?
Thanks
I would like next to my dataGrid to have another table, floating left to it. Like this, located in the main div:
| | |
| A | B |
| | |
, where A is the current dataGrid, containing all user and B will be the new content. I tried with creating a table inside the main div and putting left and right part in 2 columns inside a row, but B go out of the field of main div. I tried putting CSS for left and right col and adding two extra div but it still does not look in this way. B goes below A. Please, give me an advice how can this be done. Here is the source of the page.
The code of my page is this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<div id="container" style="min-height: 100%; position: relative;">
<div id="left"
style="background-image: url('#{resource['images/left.png']}'); background-repeat: repeat-y; height: 1800px; width: 163px; float: left;">
<br />
</div>
<div id="main" style="width: 920px; float: left;">
<f:view>
<h:form rendered="#{not empty loginBean.name}">
<h:outputStylesheet library="css" name="css.css" />
<center>
<h2>My Profile</h2>
</center>
<p:dataGrid var="user" value="#{profileBean.userList}">
<p:panelGrid columns="2">
<f:facet name="header">
<p:graphicImage value="#{profileBean.image}" alt="${user.name}"
width="150px" height="150px">
<f:param name="userId" value="#{user.id}" />
</p:graphicImage>
</f:facet>
<h:outputText value="Name: " />
<h:inputText value="#{user.name}" />
<h:outputText value="Phone: " />
<h:inputText value="#{user.phone}" required="true">
<f:validateRegex pattern="[0-9]+" />
</h:inputText>
<h:outputText value="Role: " />
<h:outputText value="#{user.userRole.roleName}">
</h:outputText>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center">
<p:commandButton id="submit" value="Save changes"
actionListener="#{profileBean.editUser()}" >
<f:attribute name="profileBean.selectedUser" value="#{user}" />
</p:commandButton>
</h:panelGroup>
</f:facet>
</p:panelGrid>
</p:dataGrid>
<hr />
</h:form>
</f:view>
</div>
</div>
<div id="right"
style="background-image: url('#{resource['images/right.png']}'); background-repeat: repeat-y; height: 1800px; width: 150px; float: right;">
<br />
</div>
</ui:define>
</ui:composition>
</html>
may be using display:table and display:table-cell will help you
here is a DEMO
Mark UP
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
.container {
display:table;
border:1px solid #000;
}
.left {
display:table-cell;
width:100px;
height:100px;
background-color:green;
}
.right {
display:table-cell;
width:100px;
height:100px;
background-color:Blue;
}
Result:
You need to set the width of "right" and "left" to fit in the width of the screen. You can do this by setting the divs width percentage wise.
e.g width=25%
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.