While experimenting with ASP.NET Web Parts, I encountered an issue with a "drop down" div that was positioned to the right of the page. When clicked, it extended beyond the window frame instead of triggering the bottom scrollbars as expected. How could this behavior be possible?
https://i.sstatic.net/gPLAK.png
Edit: This issue occurred in Internet Explorer 8. Below is the markup with some context. The key element seems to be id=WebPart_wp774658725VerbsMenu. By default, it remains hidden until clicking on certain td/span elements like VerbsPopup. Strangely, there doesn't appear to be any JavaScript attached to these elements when inspected through Developer Tools, but debugging reveals otherwise.
<TD class=partTitle>
<TABLE style="WIDTH: 100%" border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="WIDTH: 100%; WHITE-SPACE: nowrap; CURSOR: move" id=WebPartTitle_wp774658725><SPAN title="Billing Information">Billing Information</SPAN> </TD>
<TD style="WHITE-SPACE: nowrap">
<SPAN style="PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: inline-block; COLOR: white; CURSOR: hand; TEXT-DECORATION: none; PADDING-TOP: 1px" id=WebPart_wp774658725Verbs>
<SPAN style="FONT-FAMILY: Marlett; FONT-SIZE: 8pt" id=WebPart_wp774658725VerbsPopup>u</SPAN>
</SPAN>
<DIV style="DISPLAY: none" id=WebPart_wp774658725VerbsMenu>
<TABLE style="BORDER-BOTTOM: white 1px solid; BORDER-LEFT: white 1px solid; BACKGROUND-COLOR: maroon; WIDTH: 100%; BORDER-COLLAPSE: collapse; FONT-FAMILY: Arial; FONT-SIZE: 0.8em; BORDER-TOP: white 1px solid; BORDER-RIGHT: white 1px solid" cellSpacing=0 cellPadding=1>
<TBODY>
<TR>
<TD style="WHITE-SPACE: nowrap">
<DIV>
<A class=menuItem title="Deletes 'Billing Information'" onclick="if(document.body.__wpmDeleteWarning.length == 0 || confirm(document.body.__wpmDeleteWarning)){document.body.__wpm.SubmitPage('WebFormDisplay1$MainPageWPZ', 'delete:wp774658725');}" href="javascript:void(0)">
<IMG style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none; VERTICAL-ALIGN: middle; BORDER-LEFT-STYLE: none" alt="Deletes 'Billing Information'" src="/WebResource.axd?d=5L7XWTaglMPmXRe6NJDkRg2&t=633802513995006876" width=16 height=16> Delete
</A>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
WebParts.js
function WebPartMenu_OnClick() {
var a = window.event.srcElement.__menu;
if (typeof a != "undefined" && a != null) {
cancelEvent(window.event);
a.Show()
}
}
function WebPartMenu_Show() {
if (typeof __wpm.menu != "undefined" && __wpm.menu != null) __wpm.menu.Hide();
var e = "<html><head><style>" + "a.menuItem, a.menuItem:Link { display: block; padding: 1px; text-decoration: none; " + this.itemStyle + " }" + "a.menuItem:Hover { " + this.itemHoverStyle + " }" + '</style><body scroll="no" style="border: none; margin: 0; padding: 0;" ondragstart="window.event.returnValue=false;" onclick="popup.hide()">' + this.menuElement.innerHTML + "<body></html>",
b = 16,
c = 16;
this.popup = window.createPopup();
__wpm.menu = this;
var d = this.popup.document;
d.write(e);
this.popup.show(0, 0, b, c);
var a = d.body;
b = a.scrollWidth;
c = a.scrollHeight;
if (b < this.menuLabelElement.offsetWidth) b = this.menuLabelElement.offsetWidth + 16;
if (this.menuElement.innerHTML.indexOf("progid:DXImageTransform.Microsoft.Shadow") != -1) a.style.paddingRight = "4px";
a.__wpm = __wpm;
a.__wpmDeleteWarning = __wpmDeleteWarning;
a.__wpmCloseProviderWarning = __wpmCloseProviderWarning;
a.popup = this.popup;
this.popup.hide();
this.popup.show(0, this.menuLabelElement.offsetHeight, b, c, this.menuLabelElement)
}