I have a p:selectOneMenu in xhtml. But the list is not displaying properly. The list have near to 70 items. When I click on the selectOneMenu, the list populate upwards instead without scrollbar and I can't see all the items.
<td valign="top"><p:selectOneMenu id="fr1022_combo_box_ctpy"
value="#{pc_Fr1022.w_facility.ctpy}" styleClass="selectOneMenu">
<f:selectItems value="#{pc_Fr1022.w_facility.facilityCtpyList}"></f:selectItems>
</p:selectOneMenu>
</td>
I believe the way you have used f:selectItems is incorrect.
It should be
<f:selectItems value="#{pc_Fr1022.w_facility.facilityCtpyList}" var="facility"
itemLabel="#{facility.name}" itemValue="#{facility.value}" />
HTH
Related
I want to display blank value onload of h:selectonemenu without adding blank item in dropdown list. But i am not able to get it.
I tried with a few scenario by adding display:none but to no avail.
I even tried adding css but it too didnt work.
Please find the below code:
<h:selectOneMenu
id="testid" style="width:22%;" maxlength="29"
value="#{myVal.val}" >
<f:selectItem itemLabel="" itemValue="" style="display:none;"/>
<f:selectItems
value="#{myController.animalsData}" var="data" itemLabel="#{data.animalName}"
itemValue="#{data.animalCode}" />
</h:selectOneMenu>
I have read-only textboxes in a form that auto-populate data from a table.
<p:inputText value="#{ManagedBean.var}" styleClass="textbox" id="varDetails" maxlength="200"></p:inputText>
Some entries are not displayed completely because they exceed the textbox width.
How can i use the Onmouseover command to change the width of the textbox dynamically?
This seems to work:
<h:form>
<p:inputText ...
onmouseover="$(this).attr('size', this.value.length)"
onmouseout="$(this).attr('size', '')" />
</h:form>
You'd have to use min-width and not width in the styleclass.
But if the content is smaller than the current size, it will also become smaller. If you don't want that you can use something like
onmouseover="if (this.value.length > 10) $(this).attr('size', this.value.length)"
The value (10 above) should be chosen so it matches the min-width in the styleclass.
Otherwise you could give it a title:
<p:inputText ... value="#{ManagedBean.var}" title="#{ManagedBean.var}" />
That will be shown onmouseover.
You could also give it a p:tooltip:
<p:tooltip for="varDetails" value="#{ManagedBean.var}" />
That's more or less the same.
I am using Primefaces graphicImage inside a p:tooltip and would like to set the width and height for the images individually.
<p:remoteCommand....update="myImage" />
<p:tooltip beforeShow="remoteCommand()">
<p:graphicImage id="myImage"... style="#{myBean.myStyle}" />
....
Update:
Bean.myStyle is triggered correctly and the style parameter is updated in the page source, but not in the dom tree.
If I set style="width:100px" directly it works, but if the value comes from the bean, it is ignored.
It seems like the style-attribute of graphicImage gets updated but not the component itself.
What am I missing here?
I think style value is setted when the document is loaded and its never reloaded, when its visible just its display:none value is changing. So I would give an id to p:graphicImage then I would add a p:ajax using onShow or similar event (I dont know which one is available for tooltip) then I would use update attribute to render graphic image. If I remember right even it should work just with <p:ajax /> without any attribute but I am not sure
So it should look like that:
<p:graphicImage id="x" style="#{bean.value}">
<p:ajax event="show" update"x"/>
</p:graphicImage>
use this
<p:graphicImage width="#{bean.widthValue}" height="#{bean.heightValue}" >
</p:graphicImage>
I have one strange issue on UI. I have been using JSF and PrimeFaces. Whenever i am hovering my mouse on the labels of my fields my mouse icon changes to the one that appears when we click on links. But nothing happens on click. But the change of the mouse icon has been serious concern. Please find below code for one of my fields. Is there any property that i need to add to stop it. Any help much appreciated. THanks.
<p:outputLabel for="contactName" value="Contact Name: " style="font-size:11px;" />
<p:selectOneMenu id="contactName" style="width:150px" value="#{someBean.value}">
<f:selectItem itemLabel="All" itemValue="All" />
<f:selectItem itemLabel="Y" itemValue="Y"/>
<f:selectItem itemLabel="N" itemValue="N"/>
</p:selectOneMenu>
This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
can any one advice on adding a space between a radio button and its label.
do we have any attributes in f:selectItem for doing this
I have to align the radios to the other components of the page. My Labels are aligned but to align the radio, I need to put some space between it and the labels.
I am unable to find any attribute to help me in this.
Please help.
Here is how I recently did this, using primefaces:
<p:column headerText="Is your hair naturally blonde?" width="140">
<p:selectOneRadio value="#{mybean.haircolor}" id="haircolor" layout="custom">
<f:selectItem itemValue="true" />
<f:selectItem itemValue="false" />
</p:selectOneRadio>
<p:panelGrid columns="2">
<h:panelGroup>
<p:radioButton id="hairColorYes" for="haircolor" itemIndex="0"/>
<h:outputLabel for="hairColorYes" value="Yes" styleClass="radiolabelPF"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="hairColorNo" for="haircolor" itemIndex="1"/>
<h:outputLabel for="hairColorNo" value="No" styleClass="radiolabelPF"/>
</h:panelGroup>
</p:panelGrid>
</p:column>
and then my one CSS style:
.radiolabelPF {
margin-left: 5px;
}
The trick was to use layout="custom" in <p:selectOneRadio>. My actual radio buttons and labels are within the <h:panelGroup> tags.
This was the only way I could control the space between the radio label and button in Primefaces. It's also documented in the "custom layout" section of the documentation on selectOneRadio.
http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml
Please use CSS styles for this task - please see this tutorial for examples