Wicket - Auto Complete inside a ModalWindow

While trying to include an autocomplete field inside a modalwindow I came across this issue where the ajax response being sent was rendered behind the modal window on IE. Windows XP, Wicket 1.3.7

In other words the lookup values were not visible as they were placed behind the modal window container. This however worked fine on firefox.

The same auto complete text field worked fine on a normal web page. Both on IE and Firefox.

Searching through forums I realised that the z-index of the autocomplete text field was much lower than the container hence it was always behind other containers and components.

The Wicket AutoComplete .js can be browsed through to see what exactly was happening.

function getOffsetParentZIndex(obj) {
obj=typeof obj=="string"?Wicket.$(obj):obj;
obj=obj.offsetParent;
var index="auto";
do {
var pos=getStyle(obj,"position");
if(pos=="relative"||pos=="absolute"||pos=="fixed") {
index=getStyle(obj,"z-index");
}
obj=obj.offsetParent;
} while (obj && index == "auto");
return index;
}


This method above always returned zero for the modal window container and hence the auto complete z index was set to 0 + 1 = 1 which was much lower than the other containers.

Also something noticeable was on IE all container pos came out as static is not being processed in the method and hence the method goes right upto the last parent to get the z-index.


As a workaround we came up with a solution where we added style="position:relative;z-index=99999;" to the element containing the text field , this could be the div, form , td etc in your case.

What this will do is to allow the above method process the container and send back 99999 as the z-index and your auto complete's z-index would then be 99999 +1 and hence it will render above the container.


Problem Solved.

Another work around would be change the modal window content to be a web page instead of the Panel.