How to Hide the DropDownList Behind Layer
Last Updated -
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.
<
divid=''dlWrapperLayer''><asp:DropDownListID='ddlMyList'runat='server'></asp:DropDownList></div>Registering the Startup script is done in the code behind.
IfMe.ClientScript.IsStartupScriptRegistered('ShowModalDialog') = FalseThenDim sb AsNew StringBuildersb.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)EndIfI 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.
<inputid='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.