This is the second post on the same subject, since the first time I did not get the result. The select width problem continues.
I'm using selectOneMenu JSF 2 and trying to change the width of it is not working.
<h:selectOneMenu style="width:280px" styleClass="selectpicker"`>
<f:selectItem itemValue="1" itemLabel="A" />
<f:selectItem itemValue="2" itemLabel="B" />
<f:selectItem itemValue="3" itemLabel="C " />
</h:selectOneMenu>
Only works when I remove the styleClass = "selectpicker"
I've already tried adding the data-width, it also did not work. Any tips?
You can make your style more important by adding !important to the tag. This is usually a bad idea for maintainability.
style="width:280px !important"
Improve it like this
style="height: 46px"
Related
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'm new to primefaces, so I probably did a newbie mistake, but I simply can't google find my answer.
I'm trying to make a hidden panel show after I click on the checkbox, but it doesn't show.
My html looks as follows:
<br></br> Choose one <br></br><br></br>
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’visible’);" >
</p:selectBooleanCheckbox>
<h:outputText value=" click " />
</h:panelGrid>
<p:panel id="testid" header="TESTHDR" style="display:none" >
<h:panelGrid columns="2" cellpadding="10">
<p:selectBooleanCheckbox value="#{selectBooleanView.mTest}">
</p:selectBooleanCheckbox>
<h:outputText value=" test " />
</h:panelGrid>
</p:panel>
The problem is that my testid panel doesn't show after I click on the checkbox.
I'm probably doing the checkbox action listener wrong, but I honestly can't see the problem myself.
change display visible to display block like this because display visible does not exist in css.
<p:selectBooleanCheckbox onclick="$(‘#:testid’).css(‘display’,’block’);" >
I think thats it if youre code works fine.
Prime faces mangles IDs similar to ASP.NET. Both ensure that the ID is unique across the page so you get something like id="base_container_child_container_your_control_id"
You should find the way to "unmangle" it. Again in .NET you have control.ClientID which you can get from the server. Not sure about PF equivalent.
Anyhow, the solution would be to add name attribute and use
$('input[name=your-id]') // matches exactly 'your-id'
$('input[name^=your-id]') // matches those that begin with 'your-id' if you have group of them
OR use like selector
id*='value'
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.
Okay. So I'm trying to implement a global filter using commandLinks. The idea is to have an alphabet of commandLinks, which a user can then use instead of typing a letter.
So far, I've got filtering working on the column (will add the filterStyle none once the commandLinks are working).
Using chromes debug tool (ctrl-shift+i), and clicking on the command link, i can see the datatable refresh the list. However, it doesn't filter anything.
I've been using primefaces showcase, and this stack overflow post to base my code on, which is below:
<p:dataTable id="availableSpecies" var="species" value="#{bbWizardBean.speciesPaletteList}"
emptyMessage="Add First Species" dynamic="true"
width="120"
widgetVar="speciesPaletteVar"
scrollHeight="250" scrollRows="20" scrollable="true"
styleClass="width-fix-spcPal-ie" style="width:150px; margin-left: auto; margin-right: auto;"
filteredValue="bbWizardBean.speciesPaletteListFilter">
<f:facet name="header">
<h:outputText value="Species Palette" />
<p:commandLink id="globalFilter" value="A" onclick="$('speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
</f:facet>
<p:column filterBy="#{species.speciesName}"
headerText="Species" style="font-size:13px;" id="speciesColumn">
<h:outputText id="dragIcon" value="#{species.speciesNameSmall}" style="font-size:11px; background-color:silver; cursor:move;"/>
<h:outputText id="dragIconTooltip" value="..." title="Full Name: #{species.speciesName}" rendered="#{species.speciesNameLength > 10}"/>
<p:tooltip for="dragIconTooltip" />
<p:draggable for="dragIcon" revert="true" />
</p:column>
I've removed the rest of the table to make the codebase smaller. I think I'm screwing up the value I should set, but I'm not quite sure how. Any help would be appreciated! First post, so any suggestions to clean up the question is appreciate ;)
Okay, so for some reason (like i thought), the setting of the val for the filter wasn't working right. You need to add two \'s before the : for some reason. If anyone knows, that would be awesome, but the correct code is:
<p:commandLink id="globalFilter" value="A" onclick="$('#positiveRegulationForm\\:availableSpecies\\:speciesColumn_filter').val('A'),speciesPaletteVar.filter()"/>
Where
positiveRegulationForm is the top form
availableSpecies is the DataTable name
speciesColumn_filter is the filter for the column speciesColumn
Really curious as to why you need the two forward slashes