asp.net ajax toolkit combobox doesn't work in hidden div

I have a combobox inside a hidden div which I use CSS display = none to make it invisible, but when I make the div visible by setting display = block, the combobox just show the input and its button and ul list al开发者_JAVA技巧l have CSS as display = 'none', visibility ='hidden'.

I can tell it is done by combobox inbuild JavaScript because I tried to use JavaScript to set the CSS manually with no luck. It is a bug of combobox.

Below is the code to reproduce the bug. When you run it, you can't see the dropdown:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div  id="d" style="display:none">
    <asp:ComboBox ID="ComboBox1" runat="server">
    <asp:ListItem>a</asp:ListItem>
    <asp:ListItem>d</asp:ListItem>
    <asp:ListItem>f</asp:ListItem>
    </asp:ComboBox>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
<div ID="Button1" runat="server" onclick="show();">click me</div>

<script type="text/javascript">
    function show() {
        var d = $get('d');
        d.style.display = 'block';
    }
</script>

Try to use "visibility=hidden" instead of "display=none" for div

I've just had same problem and i've solved it partially. Using "hidden" instead of "none" almost worked, but strangely, the arrow icon still stays out of the div and visible, even when div was hidden.

i'm not using any style attribute applied to my hidden div, and i'm using Combobox styles without modification.

I've checked it on Chrome and IE9 by the way. Thanks for any kind of help.

Your button-div (ID="Button1") will postback the page as it's "runat=server". Remove that & most probably it'll work fine.