I am using Primefaces 6.2. When placing a selectbox inside a dialog and open it, it will scroll along the main page.
To avoid that, i've added appendTo="#(this)". With this change the scrolling works correctly, but if the height of the dropdown overflows the dialog height, automatically scrollbards are created for the dropdown and the dialog.
Example:
<p:dialog widgetVar="eventDialog" >
<p:selectOneMenu id="dummy" value="Selection" appendTo="#(this)">
<f:selectItems value="selection 1" />
<f:selectItems value="selection 2" />
</p:selectOneMenu>
</p>
To avoid the scrollbars and let the dropdown overflow i've tried panelStyle="position:fixed" instead of appendTo="#(this)". With this solution i have the problem, that the dropdown is not visible if i have a big page and scrolld down to the bottom, open the dialog and click on the dropdown.
Example:
<p:dialog widgetVar="eventDialog" >
<p:selectOneMenu id="dummy" value="Selection" panelStyle="position:fixed">
<f:selectItems value="selection 1" />
<f:selectItems value="selection 2" />
</p:selectOneMenu>
</p>
By the way i found the two solutions in the post "p:selectOneMenu dropdown part scrolls and does not stay in position".
Related
i cannot find an answer on google. I have a select box and i want to expand the input field to have a select box stretched by at least 3 rows. I know that with html it's just a simple 'size="3"' but the project i am working on is using primeface - xhtml and the selectbox is as below
<p:selectOneMenu id="areas" value="#{beanMb.item}" class="form-control" style="width:100%;" required="true" >
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{anotherbeanMb.itemSelectItem}" itemLabel="anotherbeanMb.itemSelectItem.descricao" itemValue="anotherbeanMb.itemSelectItem.codArea" />
</p:selectOneMenu>
PrimeFaces does not use a <select> element to render the p:selectOneMenu component, try using a css style to define the min-height of the div that contains the list of elements
something like this:
div[id$="areas_panel"] .ui-selectonemenu-items-wrapper {
min-height: 100px !important;
}
I have selectOneRadio component in form with wizard and I have checkbox which should be enabled if first radio button is select. Here is my code for radio button:
<p:selectOneRadio id="decision" value="#{bean.decisionApproved}">
<f:selectItem itemLabel="Approved" itemValue="true" />
<f:selectItem itemLabel="Declined" itemValue="false"/>
<p:ajax update="permitPriniting"/>
</p:selectOneRadio>
Here is my code for checkbox:
<h:panelGroup id="permitPriniting">
<p:column colspan="2">
<p:selectBooleanCheckbox value="#{bean.printingApproved}"
id="printingApId"
disabled="#{bean.decisionApproved ne true}">
However when I select first radio button , the checkbox is not enabled and it is shown twice, like it is rendered again.
I just changed this:
<p:ajax update="permitPriniting"/>
to this:
<p:ajax update="printingApId"/>
And it works:)
The situation:
I want to display specific panelGrid(s) on the page based on drop-down selection. I am doing this by storing several boolean which get set to true/false based on which item is selected in the drop down. I use the onchange="submit()" to refresh/re-render the page.
The problem:
I have validation on many fields in the form, so if I select an item it does validation and will not display the form.
The question:
How do I get the selectOneMenu change to re-render only the set of controls on the page being impacted instead of the whole page and causing validation?
The code: (JSF 1.2)
<h:selectOneMenu id="list" value="#{sessionBean.myDecorator.selectedItem}"
onchange="submit()" immediate="true" required="true"
valueChangeListener="#{requestBean.listChanged}">
<f:selectItem itemValue="#{null}" itemLabel="--Select One--" noSelectionOption="true" />
<f:selectItems value="#{sessionBean.myDecorator.mapItems}" />
</h:selectOneMenu>
Field causing validation:
<h:inputTextarea id="lblRequiredField" cols="100" rows="3" required="true" immediate="true"
value="#{sessionBean.myDecorator.myDo.myField}">
<f:validateLength minimum="1" maximum="300" />
</h:inputTextarea>
I am wondering is there a way i can add delete() in the select one menu, so that the user either can select one from the menu or delete the record right from there itself. So far i have normal select one menu, i have a method called "#{statusReport.deleteTieckt}" method. I just wondering how to add that to the below select one menu.
<ice:selectOneMenu value="#{statusReport.projectDetID}"
style="width: 350px;" partialSubmit="true"
onchange="this.form.submit()" immediate="true"
valueChangeListener="#{statusReport.retrieveReport}">
<f:ajax disabled="true"></f:ajax>
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{statusReport.listOfProjectDetail}"
var="projectBO"
itemLabel="#{projectBO.projectDtObj.pname} #{projectBO.startDate} - #{projectBO.endDate}"
itemValue="#{projectBO.pdetailId}" noSelectionValue="true" />
</ice:selectOneMenu>
Are there any attributes to pre select some radio button in tag on page lodads
below is my code i want the Now radio button to be selected when page loads ,
<h:selectOneRadio id="Radios"
value="#{pc_ClosureDecision.closureDetails.approvalDateSelected}"
layout="lineDirection" onclick="check_Date()">
<f:selectItem itemValue="now" itemLabel="Now" />
<f:selectItem itemValue="later" itemLabel="Resolve Later" />
</h:selectOneRadio></td>
Initialize #{pc_ClosureDecision.closureDetails.approvalDateSelected} with a value of "now" (in the Java code, or by injection in your faces-config.xml).