Server Side ListBox Visibility with C# and ASP.NET

Question

I am interested in using a "onmouseover" event to make a listbox appear and disappear. I am fairly new with ASP.NET and I do not want to write javascript just yet. I am trying to use the following code, and the color change portion of it works, but the listbox visibility doesn't work:

if (!IsPostBack) { Button2.Attributes.Add("onmouseover", "this.style.backgroundColor='Red', ListBox3.style.visibility='visible'"); }

        if (!IsPostBack)
        {
            Button2.Attributes.Add("onmouseout", "this.style.backgroundColor='Blue', ListBox3.style.visibility='hidden'");
        }

I have tried this code with and without "PostBack", and still no luck. Does anyone see where my code is failing me?

Thank you,

DFM

Answer 1

Try:

    if (!IsPostBack)
    {
        btnHide.Attributes.Add("onmouseout", "this.style.backgroundColor='Blue';ListBox3.style.display='none'");
        btnShow.Attributes.Add("onmouseover", "this.style.backgroundColor='Red';ListBox3.style.display='block'");
    }

The visibility property works a little differently than the display property. When the visibility property is set to 'hidden' the element is hidden but the layout is not affected whereas when setting display property to 'none' removes the element completely which may affect layout.

If you do wish to modify the visibility of the list without affecting the layout you can use a div as a wrapper and then modify its visibility property.

<div id="wrapper">    
    <asp:ListBox ID="ListBox3" runat="server"></asp:ListBox>      
</div>
<asp:Button ID="btnShow" runat="server" Text="Button" />
<asp:Button ID="btnHide" runat="server" Text="Button" />

Modify the ASPX to toggle the visibility property of the div element that contains the list box.

if (!IsPostBack)
{
    btnHide.Attributes.Add("onmouseout", "this.style.backgroundColor='Blue';wrapper.style.visibility='hidden'");
    btnShow.Attributes.Add("onmouseover", "this.style.backgroundColor='Red';   wrapper.style.visibility='visible'");
}