In the screenshot we can see that a dialog box with some selectItems and when I am scrolling using mouse the complete selectItems are moving
My Sample code:
<div class="row">
<h:outputLabel for="columnNames" value="Select Column Name:" />
<p:selectOneMenu id="columnNames"
value="#{employeeGroupList.columnName}">
<f:selectItem itemValue="" itemLabel="--- Select ---"></f:selectItem>
<f:selectItems value="#{employeeGroupList.columnNames}"></f:selectItems>
</p:selectOneMenu>
</div>
To fix it just add appendTo="#this" in the <p:selectOneMenu>
<p:selectOneMenu appendTo="#this"></p:selectOneMenu>
If this won't work you can set the position of the <p:dialog> to absolute as workaround
<p:dialog style="position: absolute; margin-top: 20px;"></p:dialog>
This will fix the problem however if you scroll the dialog will remain at the top.
Related
I have a dataTable on my JSF page:
<p:dataTable id="dataCabecera" value="#{cargaHorariaController.listaActivDoc}" var="listaActDoc"
rowKey="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad}" selectionMode="single"
selection="#{cargaHorariaController.listaActivSelected}">
<p:column headerText="Actividad" style="width: 35%">
<p:outputLabel value="#{listaActDoc.pzptcabperjactPK.pzptcabperjactActividad} - #{cargaHorariaController.descActiv(listaActDoc.pzptcabperjactPK.pzptcabperjactActividad)}"/>
</p:column>
<p:column headerText="Horas" style="width: 15%">
<p:outputLabel value="#{listaActDoc.pzptcabperjactHoras}" />
</p:column>
<p:column headerText="" style="width: 20%">
<p:commandLink id="cmdSubacti" process="dataCabecera"
style="margin:0px" title="subactividad" value="Ver Subactividad"
action="#{cargaHorariaController.consultarSubactividadesDoc()}" update=":formPrincipal:formPrincipal1:pnlDet">
<f:setPropertyActionListener value="#{listaActDoc}" target="#{cargaHorariaController.activSelected}"/>
</p:commandLink>
</p:column>
<p:column headerText="" style="width: 30%">
<p:commandButton value="Actualizar" type="button" id="actiActu" action="#{cargaHorariaController.actualizar()}" onclick="PF('wdlgActualizar').show()" />
<p:spacer width="15px" height="0px"> </p:spacer>
<p:commandButton value="Eliminar" id="actiEli" ajax="false">
<p:confirm header="Eliminar actividad" message="Está seguro que desea eliminar esta actividad?" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" style="font-size: 11px; text-height: font-size; text-align: left; font-weight: bold">
<div align="center">
<p:commandButton value="Sí" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Cancelar" type="button" styleClass="ui-confirmdialog-no CyanButton" icon="ui-icon-close" />
</div>
</p:confirmDialog>
</p:column>
<p:summaryRow>
<p:column colspan="1" style="text-align: right">
<p:outputLabel value="Total:" />
</p:column>
<p:column colspan="2" style="text-align: left">
<p:outputLabel value="#{cargaHorariaController.horasAct}" />
</p:column>
</p:summaryRow>
</p:dataTable>
I want the sum of the column "Horas" at the bottom of the table, but the summaryRow doesn't appear:
I have also the same problem with icons in my buttons (jQueryUI icons and Font Awesome icons).
How can I fix it?
Edited: I used h:outputText and I changed the colspan properties so now they add up to 4, but the same result: no p:summaryRow. I called horasAct because that variable has the result of the sum.
First for display information it's better to use a h:outputText component. Because a p:outputLabel component need to bind a label with a input field.
It gives some advantages for example:
If you mark a input field like required neer label for this field will display '*' symbol
Value from label will use in the Faces Messages
Second about your p:summaryRow. In the p:dataTable you have four columns but in columns in the p:summaryRow colSpan properties in total don't give 4 (only 3).
Also you said that want to sum values from the "Horas" column. But call
#{cargaHorariaController.horasAct} instead of #{listaActDoc.pzptcabperjactHoras}
Update
You need to add a sortBy property then a summaryRow will display. But this component calculate a sum of a column value for same rows. You can see more examples here just to try sort a table by different columns.
I think you should use a columnGroup component and add a footer for your table. This component add only one row to the bottom of your table and you can output there sum for horas column.
My page: ---
Something is causing panelGrid to create an empty cell in several rows.
I'd like to have a visible two column table, first column a label, second column an inputText element or a selectMenu with a tooltip.
My workaround was this, create a 3 column table, and when panelGrid decides not to create an empty cell, add a <br></br> to prompt it to do so.
<h:panelGrid columns="3" style="text-align:left">
<p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />
<h:outputLabel for="longitudeIdAct" value="Longitude: " />
<p:inputText id="longitudeIdAct" value="#{provisioningBean.longitude}" title="Longitude" />
<p:watermark for="longitudeIdAct" value="Longitude" />
<h:outputLabel id="equipmentDropMenuActLabel" for="equipmentDropMenuAct" value="#{provisioningBean.accessDeviceLabel}" />
<p:selectOneMenu id="equipmentDropMenuAct" value="#{provisioningBean.equipment}" title="Not needed for CSI or SIP"
disabled="#{provisioningBean.equipDisabled}" style="width: 100% !important">
<f:selectItem itemLabel=" Equipment" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{provisioningBean.equipments}" />
</p:selectOneMenu>
<p:tooltip for="equipmentDropMenuAct" />
<h:outputLabel for="rangeActId" value="Range: " />
<p:spinner id="rangeActId" value="#{provisioningBean.rangeAct}" min="1" title="Amount of telephone numbers to provide" size="3"
disabled="#{provisioningBean.rangeDisabled}" />
<br></br>
</h:panelGrid>
Is this a bug?
What am I missing here?
EDIT:
Oh neat! I managed to create a minimal example and it still has the same issue :D https://gist.github.com/WurmD/f3cb45669e6871acc77462f34891862f
screenshot - you need 10 rep to post images
So this is a 3 column h:panelGrid, but the third cell is being taken up by something
EDIT2: Same behavior with p:panelGrid
Thank you Kukeltje for this answer:
h:panelGrid columns="3" signify "start new row after each third element"
Thus, either put the watermarks (and other invisible elements) outside h:panelGrid, or use h:panelGroup to groups things that should only occupy one cell in the table:
<p:remoteCommand name="startJobActivate" actionListener="#{provisioningBean.startJobActivate}" />
<p:panelGrid columns="2" style="text-align:left">
<h:outputLabel for="orderIdAct" value="Order Number: *" />
<p:inputText id="orderIdAct" value="#{provisioningBean.orderNumberAct}" label="orderId" title="Order Number" />
<h:outputLabel for="customerNameIdAct" value="Customer: *" />
<h:panelGroup>
<!-- h:panelGroup to group things that should only occupy 1 cell in the table -->
<p:inputText id="customerNameIdAct" value="#{provisioningBean.customerName}" title="Customer Name" />
<p:watermark for="customerNameIdAct" value="Customer Name" id="watermarkcustomerNameIdAct" />
</h:panelGroup>
</p:panelGrid>
<p:panel id="executePanelAct">
<p:commandButton value="Execute Activation" id="actvateButton" update=":form:growl" styleClass="executeButton" />
</p:panel>
<!-- Items that don't need to be in panelGrid -->
<p:watermark for="orderIdAct" value="Order Number" id="watermarkorderIdAct" />
I have a SelectManyMenu that is scroolble, i want to add resize component to it but there is some problem:
1) my scrool pane does not resize
2) values of pane go out of pane on resize
<h:form>
<p:selectManyMenu id="menu" value="#{bean.selectedCity}" label="cities"
converter="#{cityConverter}" showCheckbox="true" scrollHeight="170"
filter="true" filterMatchMode="contains" style="width: 150px !important">
<f:selectItems value="#{bean.cities}" var="c" itemValue="#{c}"
itemLabel="#{c.name}"/>
</p:selectManyMenu>
<p:resizable for="menu" handles="e,s,se"/>
</h:form>
what is the problem? how can i solve it?
I am using PrimeFaces 5.0.5 with GlassFish server 3.1.2.2.
I added a selectonemenu inside a <ui:fragment> which is then included in another XHTML page.
When I open the select menu and scroll with the mouse wheel, the panel will float with the page.
Initially, I try to edit the CSS file as I was guessing it could be a position problem but it is not.
Then, I copied the source code from the showcase and the panel still splits when scrolling.
Both plain HTML drop down list and <h:selectOneMenu> are fine and I have no idea why it doesn't work with <p:selectOneMenu>.
I can find some posts mentioning this issue but they are related to older version of PrimeFaces.
Is the issue still there or fixed in 505? If yes, how to I solve this issue?
Any feedback and comment are appreciated.
Many thanks.
p:selectOneMenu dropdown not attached to the component inside a dialog
<ui:fragment
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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:panelGroup
id="cPanel"
layout="block"
styleClass="contentArea product">
<div class="mainColumnContainer">
<div class="mainColumn">
...
<div id="try">
<form>
...
<h:panelGroup>
<h:form>
<p:messages autoUpdate="true" />
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:outputLabel for="console" value="Basic:" />
<p:selectOneMenu id="console" value="#{selectOneMenuView.console}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
<p:outputLabel for="car" value="Grouping: " />
<p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cars}" />
</p:selectOneMenu>
<p:outputLabel for="city" value="Editable: " />
<p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cities}" />
</p:selectOneMenu>
</h:panelGrid>
...
regards,
Rek
The thing is that these floating divs are created with absolute positioning, and when you have layouts or dialogs or things that break the flow of the page, these p:selectOneMenu "panels" stay in the same absolute position even though you scroll the layout or container, because they are attached to the body by default.
So one way to solve this would be to attach them to themselves so the absolute panel appears next to the select in the flow of the page and doesn't move with those "inside scrollings":
<p:selectOneMenu id="console" value="#{selectOneMenuView.console}" appendTo="#this">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
Using the attribute appendTo:
Appends the overlay to the element defined by search expression.
Defaults to document body.
If you are using it inside a dialog, the panel could be cut by the dialog height, because it's styled with overflow: hidden. So another solution would be to apply position: fixed, you can do that with:
panelStyle="position: fixed;"
You can use panelStyle="position:fixed;" in selectOneMenu
I had a very similar problem, and the selecOneMenu element was placed in a dialog window in a table cell, and the dropdown was moving along with the parent while scroling.
Both solutions appendTo="#this" and panelStyle="position:fixed;" works fine, however having p:selectOneMenu element as a part of a datatable makes the dropdown hidden "under" the element it is in.
The panelStyle="position:fixed;" fixed completely the problem, as it remains at that position regardless of scrolling on the top of the element it is in.
I would like to achieve the following in a JSF1.1 environment:
Gender: RadioButtonForFemale FEMALE RadioButtonForMale MALE
<h:panelGroup>
<h:outputLabel for = "searchSex" value = "#{bundle.Sex_Label}" style ="width:15%;">
</h:outputLabel>
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="verticle-align:top;font-size:95%;color:red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M"/>
</h:selectOneRadio>
</h:panelGroup>
Basically, all the radio button should be in the same row as the lable (Gender in our case).
Attached is my current code. the radio button appear in the next row. My PanelGrid has 1 column.
thanks,
Indeed, the <h:selectOneRadio> generates a <table> which is by default a HTML block element (i.e. always starts at a new line).
You'd need to set the CSS display property to inline-table.
<h:panelGroup>
<h:outputLabel for="searchSex" value="#{bundle.Sex_Label}" style="width: 15%;" />
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="display: inline-table; verticle-align: top; font-size: 95%; color: red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
</h:panelGroup>
But this is pretty clumsy. If you're already using a <h:panelGrid>, I'd recommend to just set its columns to 2 so that you can have labels in left column and inputs in right column.
<h:panelGrid columns="2">
<h:outputLabel for="searchSex" value="#{bundle.label_sex}" />
<h:selectOneRadio id="searchSex" value="#{yy.searchSex}">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
<h:outputLabel for="somethingElse" value="Something else" />
<h:inputText id="somethingElse" value="#{yy.somethingElse}" />
...
</h:panelGrid>