HTML divs can go outside browser window?_问答_开发者

HTML divs can go outside browser window?

开发者 https://www.devze.com 2022-12-24 05:35 出处：网络

I was playing around with ASP.NET Web Parts which has a \"drop down\" div.It\'s all the way to the right of the page.When I click to bring it up, it goes off the window.Usually anything off the viewab

I was playing around with ASP.NET Web Parts which has a "drop down" div. It's all the way to the right of the page. When I click to bring it up, it goes off the window. Usually anything off the viewable area will trigger the bottom scrollbars. How is this possible?

HTML divs can go outside browser window?

Edit: It's Internet Explorer 8. Below is the markup with some context. The relevant one I think is id=WebPart_wp774658725VerbsMenu. By default it doesn't display. When you click on the td/span Verbs/span VerbsPopup (it could be any), it shows the "dropdown". In Developer Tools I don't see any JavaScript attached to those elements, but if I debug it I see it running some.

<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>&nbsp;</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&amp;t=633802513995006876" width=16 height=16>&nbsp;Delete&nbsp;
                      </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)
}

It is indeed the createPopup method that does the trick. It's a proprietary method in Internet Explorer.

See http://msdn.microsoft.com/en-us/library/ms536392%28VS.85%29.aspx.

Why not add a little extra to the margin there? Seems like the most easiest and cheapest way to save time.