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;
}
Related
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".
I have to radio buttons and text fields on the page. If the first radio button is clicked, the input text gets filled with the data. If the second radio button is clicked , then the same form gets updated and field with new information. In both cases I invoke two different functions for getting result. By default when I open the page, the first radio button is selected.
I have to color input text on the first radio button where the data in the first and second radio button are different. I have to compare if the value from for example (Name input text value from first radio button is equals to Name input text value from the second radio button). How to do that? I am new to PrimeFaces
<p:outputLabel for="name" value="#{msg['label.name']}" />
<p:inputText id="name" value="#{tab.radioButton=='First' ? tab.data.name1 : tab.data.name2}" disabled="true" />
You need ajax to update managed bean field when radio button is chosen, add conditional class to input field and refresh/update it.
XHTML
<h:form id="myForm">
<p:selectOneRadio value="#{tab.radioButton}">
<f:selectItem itemLabel="Choice 1" itemValue="First" />
<f:selectItem itemLabel="Choice 2" itemValue="Second" />
<p:ajax event="change" update=":myForm:name"/>
</p:selectOneRadio>
<p:outputLabel for="name" value="Name" />
<p:inputText id="name" value="#{tab.radioButton=='First' ? tab.data.name1 : tab.data.name2}" disabled="true"
styleClass="#{tab.radioButton == 'First' ? 'first-radio-checked' : 'other-radio-checked'}"/>
</h:form>
CSS
#myForm .first-radio-checked {
background-color: green;
}
#myForm .other-radio-checked {
background-color: red;
}
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>
In JSF 2.0 I have below
<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
<f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>
I get output as
O Accepted O Rejected
^^
What I want is add space between two radio button so that output would be
O Accepted O Rejected
^^^^^^^^^^^
I tried adding between two radio button however it is not working. I am getting radio button on next line.
<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
<f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>
Any idea how this can be done?
HTML generated without is
<table id="radio26">
<tr>
<td>
<input type="radio" checked="checked" name="radio26" id="radio26:0" value="Accepted" onclick="validateMyRadioButton()" /><label for="radio26:0"> Accepted</label></td>
<td>
<input type="radio" name="radio26" id="radio26:1" value="Rejected" onclick="validateMyRadioButton()" /><label for="radio26:1"> Rejected</label></td>
</tr>
</table>
When I add   one space is generated before <table id="radio26"> statement.
Disclaimer, I don't know anything about JSF, so the following is based on my experience of ASP.NET and adding spaces in there. If this is wildly incorrect, please let me know, and I will remove immediately...
Try adding the space to the item label, updating...
<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
To...
<f:selectItem itemValue="Accepted" itemLabel="Accepted " id="accepted"/>
It might need to be escaped itself into...
<f:selectItem itemValue="Accepted" itemLabel="Accepted " id="accepted"/>
UPDATE
As the OP says in the comments, this will extend the link.
Looks like you should be able to set a CSS class to the parent object with something like...
<h:selectOneRadio styleClass="myRadioCtrl" ... >
And then in your style / CSS have something like...
.myRadioCtrl span { padding-right: 10px; }
Just thought id share my answer... after inspecing the page with firebug i ended up with the following
JSF:
<h:panelGroup id="search-options" layout="block" styleClass="radioButtonSpace">
<h:selectOneRadio value="#{searchEngineController.reportSearch}">
<f:selectItem itemValue="#{false}" itemLabel="CEPIS Search" />
<f:selectItem itemValue="#{true}" itemLabel="Report Search" />
</h:selectOneRadio>
</h:panelGroup>
CSS:
.radioButtonSpace table tbody td {padding-right:50px;}
I was having difficulties with this. Applying Style did not work for me when I did it on h:selectOneRadio, however it worked when applied in panelgroup wrapping around it.
Nothing of these answers worked for me, but like this works perfectly:
.ui-selectoneradio label{ padding-right: 10px !important; }
This is in case using primefaces