asp.net ajax toolkit combobox doesn't work in hidden div
- by sam
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 all 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. Urgent help needed. I spent a week to solve this, and our team put a lot trust on the toolkit. Please help me on this, all javascript gurus, thanks.
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>
