I use AutoCompleteExtender with ModalPopup contol. All works fine in the Firefox and IE but in the Chrome I don't see popup window (<ul><li> tags) that created with AutoComplete. I parsed result html and source codes and found that Chrome detected as Safari browser. And with this settings modal form has 10001 z-index but ul tag (that created at the end html page with Safari browser) has 10000 z-index. That is why it invisible. Of course we can change z-index of <ul> tag to 10002 but it is wrong solution.
PopupBehavior.pre.js:
setupPopup: function() {
/// <summary>
/// Position the popup relative to its parent
/// </summary>
var element = this.get_element();
var bounds = this.getBounds();
$common.setLocation(element, bounds);
// Tweak the position, set the zIndex, and add the background iframe in IE6
this.adjustPopupPosition(bounds);
element.style.zIndex = 10000; // must be 10002 for Chrome
this.addBackgroundIFrame();
},
ModalPopupBehavoir.pre.js:
this._backgroundElement.style.zIndex = 10000;
//...................
this._foregroundElement.style.zIndex = $common.getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;
AutoCompleteBehavoir.pre.js:
// Safari styles the element incorrectly if it's added to the desired location
if (Sys.Browser.agent === Sys.Browser.Safari) {
/// but it wrong for Chrome??????
document.body.appendChild(this._completionListElement);
} else {
element.parentNode.insertBefore(this._completionListElement, element.nextSibling);
}
Comments: Would you provide a sample project with the layout described in your scenario?
PopupBehavior.pre.js:
setupPopup: function() {
/// <summary>
/// Position the popup relative to its parent
/// </summary>
var element = this.get_element();
var bounds = this.getBounds();
$common.setLocation(element, bounds);
// Tweak the position, set the zIndex, and add the background iframe in IE6
this.adjustPopupPosition(bounds);
element.style.zIndex = 10000; // must be 10002 for Chrome
this.addBackgroundIFrame();
},
ModalPopupBehavoir.pre.js:
this._backgroundElement.style.zIndex = 10000;
//...................
this._foregroundElement.style.zIndex = $common.getCurrentStyle(this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;
AutoCompleteBehavoir.pre.js:
// Safari styles the element incorrectly if it's added to the desired location
if (Sys.Browser.agent === Sys.Browser.Safari) {
/// but it wrong for Chrome??????
document.body.appendChild(this._completionListElement);
} else {
element.parentNode.insertBefore(this._completionListElement, element.nextSibling);
}
Comments: Would you provide a sample project with the layout described in your scenario?