Primefaces autocomplete menu opens in the wrong spot - primefaces

Question

I have dialog with some detail information. When dialog is opened informations are shown as noneditabile labels. User can open editabile grid pressing button which change render parameter to both panelGrid, noneditabile is set to flase and editabile to true.
In editable grid I have autocomplete component which menu is show on wrong spot. Left and top attributes for autocomplete menu are set relative to body, not to dialog (like top-left corner of dialog is on 0,0). That happens only when I open dialog for 1st time, if I close it and open again then menu is properly opened below textbox field.
<p:dialog ... appendTo="#(body)">
<h:form>
<p:outputPanel id="opX">
<p:panelGrid rendered="#{x}" >
// non editabile content
</p:panelGrid>
<p:panelGrid rendered="#{!x}" >
// editabile content
...
<p:autoComplete value="#{xBean.acValue}" completeMethod="#{xBean.acMenu}" />
...
</p:panelGrid>
</p:outputPanel>
<p:commandButton action="#{x=!x;}" process="#this" update="opX" />
</h:form>
</p:dialog>
Any idea why this is happening so?
Furthermore I have troubles with autocomplete which has columns in it when it's rendered afterwards (or update after some changes).
I get error:
itemLabel="#{sifra.value}": Property 'value' not found on type
java.lang.String
<p:autoComplete value="#{xBean.acValue}" completeMethod="#{xBean.acMenu}" var="sifra" itemValue="#{sifra.value}" itemLabel="#{sifra.value}" >
<p:column><b>#{sifra.value}</b></p:column>
<p:column>#{sifra.name}</p:column>
</p:autoComplete>
public List<GeneralListDto> acMenu(String inputValue) {
try {
GeneralListDto x = calling sme web service;
return x;
}
catch(Exception e){
...
}
}
public class GeneralListDto {
public GeneralListDto(){
}
public GeneralListDto(String n, String v, String d){
this.name = n;
this.value = v;
this.description = d;
}
private String value;
private String name;
private String description;
getter and setters
....
}

Answer 1

Unfortunately I couldn't reproduce your problem, but here's some tips:
Try to place the form outside the dialog
<h:form id="dialogForm">
<p:dialog widgetVar="dlgWV" appendToBody="true">
</p:dialog>
</h:form>
try to update the form before opening the dialog, in this way it might "recalculate the position"
<p:commandButton update=":dialogForm" oncomplete="dlgWV.open()" />
As for itemLabel="#{sifra.value}": Property 'value' not found on type java.lang.String.
You need to implement a converter for sifra object.
Sometimes if you have too many results in the autocomplete suggestion panel, you might run into view problems, like the position and some unvisible items, in this case you have two solutions, CSS or overrride the position of the panel.
CSS
.ui-autocomplete-panel {
max-width: 400px;
z-index: 2012;
overflow:auto;
height: 200px;
}
JS
PrimeFaces.widget.AutoComplete.prototype.alignPanel = function() {
var fixedPosition = this.panel.css('position') == 'fixed',
win = $(window),
positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null,
panelWidth = null;
if(this.cfg.multiple) {
panelWidth = this.multiItemContainer.innerWidth() - (this.input.position().left - this.multiItemContainer.position().left);
}
else {
panelWidth = this.input.innerWidth();
}
this.panel.css({
left:'',
top:'',
width: panelWidth
})
.position({
my: 'left top'
,at: 'left bottom'
,of: this.input
,collision: 'none',
offset : positionOffset
});
}
Hope this helps.