ASP.Net Ajax ComboBox in ModalPopup

Question

I have a combo box inside the ModalPopupExtender module, and when the popup appears, the list of items is not under the text box, but is shifted 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 to find some solutions here and here

but no luck. What can I do about it?

Answer 1

It seems the only problem is that ModalPopup encountering the default ComboBox default style. You just need to play ListItem with the CSS class that applies to the ListItem in the ComboBox to make them display correctly. Add the following code to your CSS for this page (tested in IE9, Chrome and FireFox), and you should be fine:

 .ajax__combobox_itemlist { position:fixed !important; } 

See the “Combo Box Theming” section at the bottom of the documentation page for more information .