Yesterday I was working with some large combox element within jQuery UI dialog box. It was populating too large data to deal with that user could take more than a minute to find the correct option. So, I decided to plug existing autocomplete plugin as replacement box. Old code didn’t use jQuery UI autocomplete so existing plugin was overriding some functions.
Problem Found
pengoworks jQuery plugin was working find on normal page but within the dialog box or overlay it doesn’t align autocomplete drop down along with input box.
Diagonsis
So, when I tried to debug it with firebug it showed me that z-index of autocomplete div wasn’t higher than jQuery UI dialog box. Also found that It’s using following line to find position of input box.
// get the position of the input field right now (in case the DOM is shifted)
var pos = findPos(input);//function details
function findPos(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}
I found that this function is not smart enough to deal with element within overlay.
Solution
-
z-index Fix:
>> open autocomplete.css supplied within plugin and find css rule .ac_results
>> then replace attribute z-index value to > 99999. (i.e 2147483647) -
autocomplete position fix:
>> open autocomplete.js file
>> find showResults() function.
>> replace var pos = findPos(input); with var pos = $(input).offset();
>> few lines below replace css attributes inside $results.css();$results.css({
width: parseInt(iWidth) + “px”,
top: (pos.top + input.offsetHeight) + “px”,
left: pos.left + “px”,
zIndex: 2147483647
}).show();>> Save File
About Vikas Bhagwagar
VikasBhagwagar is Web Developer, Frontend Engineer, Interaction Designer, SEO engineer, System Admin, PSD slicer, Database Developer etc etc in-short B.E. Computer Engineer from SVNIT-Surat