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
Related
I am using PrimeFaces on springboot and I have a view xhtml
And I want to update the datalist by value (diesel,essence..)
my view code is like this:
<h:form>
<div id="left">
<h3>Carburant</h3>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:selectOneRadio value="#{carFormBean.car.carburant}">
<f:selectItem itemLabel="All" itemValue="All" />
<f:selectItem itemLabel="Diesel" itemValue="Diesel" />
<f:selectItem itemLabel="Essence" itemValue="Essence" />
<f:selectItem itemLabel="Hybride" itemValue="Hybride" />
<p:ajax event="change" update="selectedCarsList" />
</p:selectOneRadio>
</h:panelGrid>
</div>
<div id="content" class="left_content">
<p:dataList value="#{carBean.cars}" var="car" type="definition"
id="selectedCarsList" paginator="true" rows="15">
<f:facet name="header">
Voiture liste
</f:facet>
#{car.id}, #{car.marque} , #{car.model.nom},#{car.carburant} ,#{car.immVoi}
</p:dataList>
</div>
</h:form>
and the table in my database is like this image.
what should i add to code to make it work?
I am trying to call a listener inside using p:ajax. I am getting this error when i do it - Unable to attach to non-ClientBehaviorHolder parent
Tried the same with too and I am getting the same error. I think it is the problem with My piece of code is this.
<p:columns rendered="#{someColumns.isColumnVisible(propName)}"
sortBy="#{propName}" style="padding: 0px;"
sortFunction="#{dataNav.sortOrders[propName]}">
<p:outputPanel id="#{propName}Cell" layout="block"
style="width: 100%;
height: 100%; padding: 4px; margin: 0; cursor: pointer;" autoUpdate="true">
<!-- <ui:insert /> -->
<p:ajax event="click" global="true" immediate="true"
listener="#{selectedRowHandler.setSelectedRowKey(rowKey)}"
process="#this" update="#{tableId} #{render}" disabled="#{disabled}" />
<p:ajax event="click" global="true"
listener="#{selectedRowHandler.setSelectedRowKeyOnDblClick(rowKey)}"
process="#this" update="#{tableId} #{render}" disabled="#{disabled}" />
</p:outputPanel>
</p:columns>
I am using primefaces 6.1.
I want to add tooltip for selectitem while doing mouse over on each item.
Here is my code
<h:selectOneRadio id="class" styleClass="bold" rendered="# {bean.campusObject.campus=='C'}" value="#{bean.type}">
<f:selectItem itemLabel=" Dept " itemValue="1" />
<f:selectItem itemLabel="Course " itemValue="2" />
<f:selectItem itemLabel="Course with Dept" itemValue="3" />
<f:selectItem itemLabel="Specialization" itemValue="4" itemDisabled="#{!bean.level.equals('PG')}"/>
<f:ajax render="cours" ></f:ajax>
</h:selectOneRadio>
You can do it by implementing a custom layout for the selectOneRadio component as follows:
<p:selectOneRadio id="radioGroup" layout="custom"
value="#{bean.radioValue}" disabled="#{bean.disabled}">
<f:selectItems value="#{bean.radioItems}" var="r"
itemLabel="#{r.label}" itemValue="#{r}" />
<p:ajax />
</p:selectOneRadio>
<h:panelGrid columns="2" styleClass="radioLayout">
<c:forEach var="r" items="#{bean.radioItems}" varStatus="status">
<p:radioButton for="radioGroup" disabled="#{bean.disabled}"
itemIndex="#{status.index}" id="radio${r.id}" />
<h:panelGroup>
<p:outputLabel value="#{r.label}" title="Your tooltip" />
</h:panelGroup>
</c:forEach>
</h:panelGrid>
Hello I have a form that is rendered with a panelgrid with 3 columns like this:
Label-InputField-ErrorMessage
I want to add some checkboxes but I have trouble with the alignment.
<h:panelGrid columns="3">
<h:outputText value="Όνομα:"></h:outputText>
<h:inputText id="name" value="#{regBean.name}" required="true"
requiredMessage="Παρακαλώ εισάγετε όνομα!"
>
<f:validator validatorId="nameValidator" />
</h:inputText>
<h:message id="namemsg" for="name" style="color:red"></h:message>
<h:outputText value="Επώνυμο:"></h:outputText>
<h:inputText id="surname" value="#{regBean.surname}" required="true"
requiredMessage="Παρακαλώ εισάγετε επώνυμο"
>
<f:validator validatorId="nameValidator" />
</h:inputText>
<h:message for="surname" style="color:red"></h:message>
<h:outputText value="Ενδιφέρομαι για"></h:outputText>
<h:selectManyCheckbox>
<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
<f:selectItem itemValue="4" itemLabel="Number1 - 4" />
</h:selectManyCheckbox>
<h:commandButton type="submit" value="Submit"></h:commandButton>
<h:commandButton type="reset" value="Reset"></h:commandButton>
</h:panelGrid>
Without selectboxes:
This is what I get when I add them:
I want something like this:
I tried adding html tags inside the h:panelGrid but it failed. Is there any way to achieve it only with css/html/jsf?
Thx in advnace
It was easier than I thought. I had to add layout="pageDirection" at the <h:selectManyCheckbox> and wrap the selections in a panelGroup
The fixed code:
<h:outputText value="Ενδιαφέρομαι για"></h:outputText>
<h:panelGroup layout="block">
<h:selectManyCheckbox layout="pageDirection">
<f:selectItem itemValue="1" itemLabel="Item 1" />
<f:selectItem itemValue="2" itemLabel="Item 2" />
<f:selectItem itemValue="3" itemLabel="Item 3" />
<f:selectItem itemValue="4" itemLabel="Item 4" />
</h:selectManyCheckbox>
</h:panelGroup>
I'm facing an issue with the Primefaces Chat demo from the Primefaces showcase. The outputPanel component does not display a scroll bar like in the showcase demo. Here is my code and screenshot below:
<h:head>
<script type="text/javascript">
function handleMessage(data) {
var chatContent = $(PrimeFaces.escapeClientId('form:public'));
chatContent.append(data + '<br />');
//keep scroll
chatContent.scrollTop(200); <----------- have tried "chatContent.height()"
}
</script>
</h:head>
<h:body>
<p:growl id="growl" showDetail="true" />
<h:form id="form">
<p:fieldset id="container" legend="UserChat" toggleable="true">
<h:panelGroup rendered="#{chatView.loggedIn}">
<h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">
<p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs" />
<p:dataList id="users" var="user" value="#{chatView.users}" styleClass="usersList">
<f:facet name="header">
Users
</f:facet>
<p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">
<f:setPropertyActionListener value="#{user}" target="#{chatView.privateUser}" />
</p:commandButton>
#{user}
</p:dataList>
</h:panelGrid>
<p:separator />
<p:inputText value="#{chatView.globalMessage}" styleClass="messageInput" />
<p:spacer width="5" />
<p:commandButton value="Send" actionListener="#{chatView.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
<p:spacer width="5" />
<p:commandButton value="Disconnect" actionListener="#{chatView.disconnect}" global="false" update="container" />
</h:panelGroup>
<h:panelGroup rendered="#{not chatView.loggedIn}" >
Username: <p:inputText value="#{chatView.username}" />
<p:spacer width="5" />
<p:commandButton value="Login" actionListener="#{chatView.login}" update="container"
icon="ui-icon-person" />
</h:panelGroup>
</p:fieldset>
<p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">
<h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">
<p:outputLabel for="pChatInput" value="To: #{chatView.privateUser}" />
<p:inputTextarea id="pChatInput" value="#{chatView.privateMessage}" rows="5" cols="30" />
<p:spacer />
<p:commandButton value="Send" actionListener="#{chatView.sendPrivate}" oncomplete="pChat.hide()" />
</h:panelGrid>
</p:dialog>
</h:form>
<p:socket onMessage="handleMessage" channel="/chat" autoConnect="true" widgetVar="subscriber"/>
</h:body>
Any clues about what i'm doing wrong?
Thanks and best regards!
The issue may be you didn't specify chatlogs css class, you should add it as below:
<style type="text/css">
.chatlogs {
height: 210px !important;
max-height: 210px !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
}
</style>
And if you would like to scroll to bottom, you can try:
chatContent.scrollTop(chatContent[0].scrollHeight);