I am working on a JSF page which has a dropdown based on selectOneMenu
<h:selectOneMenu id="speciality_unit" value="#{editCdc.selectedUnit}">
<f:selectItem itemValue="" itemLabel="Select Unit" />
<f:selectItems value="#{editCdc.listOfUnit}" />
</h:selectOneMenu>
The problem I am facing here is that whenever I select this dropdown, it shows the default option in the list along with other items. I.e. it shows "Select Unit" along with other units. I want to remove this "Select Unit" from the dropdown list. How I can do this?
Hide it using CSS.
<h:selectOneMenu ... styleClass="hideFirstOption">
select.hideFirstOption option:first-child {
display: none;
}
Related
I have the following code which generates the radio button properly.
<c:forEach items="#{sampleController.modelVo.valuesList}" var="valueVo">
<p:selectOneRadio
id="pickedSdlp_#{valueVo.id}"
value="#{sampleController.selectedValue}"
layout="responsive"
columns="1"
converter="omnifaces.SelectItemsConverter" >
<f:selectItem
id="valueVo#{valueVo.id}"
itemLabel="#{valueVo.valueVoDesc}"
itemValue="#{valueVo}">
</f:selectItem>
</p:selectOneRadio>
<p:selectManyCheckbox
id="timeBlocks_#{valueVo.id}"
value="#{valueVo.timeId}"
layout="responsive"
columns="1">
<f:selectItems value="#{valueVo.subValueList}" var="valueVoTime" itemLabel="#{valueVoTime.from} #{valueVoTime.to}" itemValue="#{valueVoTime.id}" />
</p:selectManyCheckbox>
</c:forEach>
Is it possible to hide/show p:selectManyCheckbox based on the value selected? the value is actually based on voList.canShow == 'Y', if Y then show else hide it.
Radio buttons are dynamically created so not sure how to achieve this.
I am able to generate the following and highlighted the radio selected under each radio button check boxes are generated but how to hide/show them based on the radio value(ON/OFF):
PrimeFaces p:selectOneMenu items has a property called noSelectionOption which is basicly selected when no option is selected.
I would like my p:selectOneMenu to look a bit different when a value is selected or not, but nothing in HTML change on the DOMElement of the p:selectOneMenu when the noSelectionOption option is selected or not.
Any idea ?
I don't see what you've missed, but the CSS class ui-noselection-option is applied to the list item (li) of the no select option. Tested with:
<p:selectOneMenu>
<f:selectItem itemValue="0" itemLabel="0" noSelectionOption="true"/>
<f:selectItem itemValue="1" itemLabel="1"/>
<f:selectItem itemValue="2" itemLabel="2"/>
</p:selectOneMenu>
This now leaves you with How do I override default PrimeFaces CSS with custom styles?
For example:
.ui-noselection-option {
color: red;
}
I encountered a problem on selectOneMenu component and the primefaces fileupload.
<h:outputLabel value="Categorie :" />
<p:selectOneMenu value="#{composantbean.selectedCategoryId}" required="true" >
<f:selectItem itemLabel="Select categorie" itemValue="" />
<f:selectItems value="#{composantbean.listcat}" var="cat" itemValue="#{cat.nomCat}" itemLabel="#{cat.nomCat}" />
<p:ajax update="panlecart2" event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>
My problem is at the display.
the selectOneMenu is displayed but ItemLabel is hidden with a black color of my theme "trontastic"
and the file upload is not displayed.
This problem no longer exite when I work with explorer instead of chrome
or when I do
<p:commandButton value="Annuler" update="panel1" process="#this">
<p:resetInput target="panel1" />
</ p: commandButton>
I should do, please thank you in advance
when I chnage my methode like this
public String Ajouter(){
selcetitem=new Composant();
return "AjoutC?faces-redirect=true";
}
instead of this
public String Ajouter(){
selcetitem=new Composant();
return "AjoutC";
}
it works fine :)
I am not sure about the root cause but here is a temporary solution:
$(document).ready(function() {
$(document.getElementById('button')).click();
});
And this script execute your button:
<p:commandButton id="button"value="Annuler" update="panel1" process="#this" style="display:none;">
<p:resetInput target="panel1" />
</p:commandButton>
Try to give exact client id of the button inside javascript function. You can detect it via browser's settings.
About problem's itself; p:selectOneMenu showing the selected value inside of a label. I guess sth. overrides it's css, let give an id to your p:selectOneMenu(let say menu) and if it is exists inside of a form(let's say it's id is form). So you can try to change the css of that label via:
$(document.getElementById('form:menu_label')).css("width":150);
Or directly alter the css class which is .ui-selectonemenu label
Also to be able to avoid from view state bug ajax=false should be added into navigation button. Actually navigation should be done via links and their outcome property like here.
I have a menu with filter on. The value and label are both String. In this case, does the "converter" property have to be set? The reason I'm asking is that the filter function is not working if the "converter" is not provided. E.g.,
<p:selectOneMenu value="#{menuBean.selectedCountry}" filter="true" filterMatchMode="startsWith">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItem itemLabel="US" itemValue="1"/>
<f:selectItem itemLabel="Spain" itemValue="2"/>
</p:selectOneMenu>
Thank you for your points and help!
You didn't specify your primefaces version but this is a bug in 3.4. You can set the height attribute of p:selectOneMenu or you can apply the following fix from here. SelectOneMenu with filter not working with less than 10 elements.
I am trying to use primfaces' selectonemenu and menubar for navigation, however I am having trouble getting the menubar to display the selectOneMenu as it only seems to want to recognize tags and not tags. Any ideas?
menubar http://www.primefaces.org/showcase-labs/ui/menubar.jsf
selectOneMenu http://www.primefaces.org/showcase-labs/ui/selectOneMenu.jsf
Use a Toolbar instead of a Menubar:
<p:toolbar>
<p:toolbarGroup align="left">
<p:selectOneMenu>
<f:selectItem itemValue="Red" itemLabel="Red"/>
<f:selectItem itemValue="Blue" itemLabel="Blue"/>
<f:selectItem itemValue="Green" itemLabel="Green"/>
<!-- other components -->
</p:selectOneMenu>
</p:toolbarGroup>
</p:toolbar>
Produces: