How to Hide the DropDownList Behind Layer

A very common problem for modern web interface developers is displaying layers over a DropDownListBox. The DropDownListBox always wants to be displayed on top of any other control or layer in the page. This is because the DropDownListBox is actually a system control and not something controlled by the browser.

There is a common method to control this behavior that many are not aware of and it involves wrapping the DropDownListBox in a Div tag and using some JavaScript to control the display behavior.

Recently I came into a situation where I needed to display a layer as a Model dialog on top of my web page. The dialog layer would not hide a DropDownListBox that happened to be position directly behind it.

Hiding the DropDownListBox

Hiding the DropDownListBox involves wrapping it in a DIV or maybe a SPAN tag, depending on your preferences. In my case I also register a startup script because my Modal Dialog is displayed when the page is loaded, but you could just add this as a normal JavaScript method. In the JavaScript you need to set the visibility of the Div to hidden.

<

div id=''dlWrapperLayer''>

<asp:DropDownList ID='ddlMyList' runat='server'>

</asp:DropDownList></div>

Registering the Startup script is done in the code behind.

If Me.ClientScript.IsStartupScriptRegistered('ShowModalDialog') = False Then

Dim sb As New StringBuilder

sb.Append(

'document.all['ModalDialogLayer'].style.visibility = 'visible';document.all['PopUpBackGround'].style.height = 1500;document.all['PopUpBackGround'].style.width = window.screen.availWidth;document.all['PopUpBackGround'].style.visibility = 'visible';document.all['dlWrapperLayer'].style.visibility = 'hidden';')

Me.ClientScript.RegisterStartupScript(GetType(printcopyfax), 'ShowModalDialog', sb.ToString, True)

End If

I will try to remember to write an entry on doing a modal dialog soon, so don't worry.

Redisplay the DropDownListBox

I have a button on my dialog layer to close it, or essentially hide it from view. I leverage the onclick event handler to redisplay the drowdownlistbox.

<input id='cbDontShow' value='I Acknowledge' type='button' accesskey='S' title='Ackowledge Message.'

runat='server' onclick='document.all['ModalDialogLayer'].style.visibility = 'hidden';document.all['dlWrapperLayer'].style.visibility = 'visible';document.all['PopUpBackGround'].style.visibility = 'hidden';' /></td>

Hopefully this will prove to be useful for you in the future.

Share This Article With Your Friends!

We use cookies to give you the best experience possible. By continuing, we'll assume you're cool with our cookie policy.

Install Love2Dev for quick, easy access from your homescreen or start menu.

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel