ASP.Net Ajax ComboBox in ModalPopup

Question

I have a combo box inside a ModalPopupExtender and when the popup is showed the list of items is not located under the text box but is offset to the right. my code is:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true">
        <Services>
        </Services>
        <Scripts>
            <asp:ScriptReference Path="~/JavaScript/ScriptManager.js" />
        </Scripts>
</asp:ScriptManager>

<div>
    <asp:Panel ID="dialog" runat="server"> 
        <div id="dialogContents"> 
            <asp:ComboBox ID="DropDownListMailTos" runat="server" AutoPostBack="true" 
                DropDownStyle="DropDown" Width="90%" RenderMode="Block"> 
                <asp:ListItem Text="1" Value="1" /> 
                <asp:ListItem Text="2" Value="2" /> 
                <asp:ListItem Text="3" Value="3" /> 
            </asp:ComboBox> 
            <br /> 
            <asp:Button ID="btnOK" Text="OK" runat="server" /> 
        </div> 
    </asp:Panel> 

    <asp:Button ID="btnShow" Text="Open Dialog" runat="server" /> 

    <asp:ModalPopupExtender 
        TargetControlID="btnShow" 
        PopupControlID="dialog" 
        OkControlID="btnOK" 
        DropShadow="true" 
        BackgroundCssClass="modalBackground" 
        runat="server" /> 
</div>

i tried few solutions found here and here

but no luck there. What can i do about it?

Answer 1

It looks like the only problem here is that the ModalPopup is clashing with the default styling of the ComboBox. You just need to play around with the CSS class that's applied to the ListItems in the ComboBox to get them to show up right. Add the following code to your CSS for that page (tested in IE9, Chrome, and FireFox) and you should be good:

.ajax__combobox_itemlist
{
    position:fixed !important;
}

For more information, see the section on "Combo Box Theming" at the bottom of the documentation page.