More with ajax control toolkit’s combobox and Modalpopupextender

One idiosyncrasy of the ModalPopupExtender is that its HTML content is actually visible while the page is loading, until the $create() call initializes it. If you have a lengthy load time, as I did with a ListView full of records, the visibility is noticeable.

One simple solution to this is to assign the style=”display:none” to the Control containing your content.

<asp:Panel id="AdvancedFiltersContainer" runat="server" CssClass="AdvSch_PopupControl" Style="display:none;" >

    content

</asp:Panel>

<act:ModalPopupExtender id="Modal1" runat="Server" PopupControlID="AdvancedFiltersContainer" >

</act:ModalPopupExtender>

However, I’ve learned that once an Ajax Control Toolkit ComboBox control is present, IE 9 (and presumably earlier browsers) reports a JavaScript error as the Combobox is being initialized. When the HTML for the combobox is hidden, its elements have an offsetWidth, offsetHeight, clientWidth, and clientHeight of 0. The ComboBox calculates a value based on offsetWidth, subtracts the size of the border, and assigns the result to a Style.width object.

Here is a snippet from the function, _getOptionListWidth, where the issue resides.

// first, default to the clientWidth of the container

var bestWidth = this.get_comboTableControl().offsetWidth;

// subtract borders from the offsetWidth

bestWidth -= (leftBorder + rightBorder);

// in order for ths list's scrollWidth to be correct, must set its width

var originalWidth = style.width;

style.width = bestWidth + 'px';

If you are paying attention, you’ll notice that when style.width is set, the value it gets is a negative number (0 – border width). That throws a JavaScript exception in IE 9. I’ve found that even assigning style.width to “0px” throws this exception.

As a result, you cannot use style=”display:none;” to fix the problem I’ve raised, at least on IE 9.

Here’s my simple solution.

Assign style=”position:absolute;left:100000px;” instead. This will leave the ModalPopup visible, but way off screen. When ModalPopup initializes itself, it overwrites both position and left styles to fit its needs.

<asp:Panel id="AdvancedFiltersContainer" runat="server" CssClass="AdvSch_PopupControl" Style="position:absolute;left:100000px;" >

    content

</asp:Panel>

<act:ModalPopupExtender id="Modal1" runat="Server" PopupControlID="AdvancedFiltersContainer" >

</act:ModalPopupExtender>