Question

i have a filter panel with 5-6 combo boxes ajax control tool kit..

i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script

however when i have my filter panel as visible = false runat=server java script does not get the object

and if i do code behind.. filterpanel.attributes.add(“style”,display:none)
filterpanel.attributes.add(“style”,visibilty:hidden)

the combo box throws a runtime error..

i’ve searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!

Answer 1

The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.

So display: none; won’t work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.

A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:

filterPanel.Attributes.Add("style",
    "position: fixed; left: -10000px; top: -10000px;");

That way, the panel and its contents won’t be visible, but the size of the <select> elements will be properly computed.

On the client side, the formula to show the panel becomes:

document.getElementById("filterPanelClientID").style.position = "static";

And to hide it again:

document.getElementById("filterPanelClientID").style.position = "fixed";

You can test a jQuery-based implementation here.