WebPart.Height Property

Definition

Gets or sets the height of a zone.

public:
 virtual property System::Web::UI::WebControls::Unit Height { System::Web::UI::WebControls::Unit get(); void set(System::Web::UI::WebControls::Unit value); };
[System.Web.UI.WebControls.WebParts.Personalizable]
public override System.Web.UI.WebControls.Unit Height { get; set; }
[<System.Web.UI.WebControls.WebParts.Personalizable>]
member this.Height : System.Web.UI.WebControls.Unit with get, set
Public Overrides Property Height As Unit

Property Value

A Unit object that indicates the height of a WebPartZone. The default type of a Unit is pixels, as indicated by the Type property.

Attributes

Examples

The following code example demonstrates the rendering issue that affects the height of WebPart controls in a WebPartZone. To demonstrate this issue, you must run the page in Internet Explorer.

Note that the zone's orientation is set to horizontal, and that the height of the zone and the controls within it is not set explicitly. The result is that in the WebPartZone, the shorter WebPart control does not stretch to the height of the zone upon rendering. However, if you remove the DOCTYPE declaration from the page and run the page again, the issue does not occur, because now the browser will not render the page in standards mode.

<%@ Page Language="C#"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

  protected void Button1_Click(object sender, EventArgs e)
  {
    wpmgr.DisplayMode = WebPartManager.DesignDisplayMode;
  }
  protected void Button2_Click(object sender, EventArgs e)
  {
    wpmgr.DisplayMode = WebPartManager.BrowseDisplayMode;
  }

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
      <asp:webpartmanager id="wpmgr" runat="server" />
      <asp:webpartzone id="WebPartZone1" runat="server" 
        layoutorientation="horizontal">
        <zonetemplate>
          <asp:textbox id="TextBox1" runat="server" title="Text input">
          </asp:textbox>
          <asp:calendar id="Calendar1" runat="server" title="Personal Calendar" />
        </zonetemplate>
      </asp:webpartzone>
      <asp:button id="Button1" runat="server" text="Design Mode" 
        onclick="Button1_Click" />
      <br />
      <asp:button id="Button2" runat="server" onclick="Button2_Click" 
        text="Browse Mode" />
    </form>
</body>
</html>
<%@ Page Language="VB"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

  Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    
    wpmgr.DisplayMode = WebPartManager.DesignDisplayMode
    
  End Sub

  Protected Sub Button2_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    
    wpmgr.DisplayMode = WebPartManager.BrowseDisplayMode
    
  End Sub
  
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
      <asp:webpartmanager id="wpmgr" runat="server" />
      <asp:webpartzone id="WebPartZone1" runat="server" 
        layoutorientation="horizontal">
        <zonetemplate>
          <asp:textbox id="TextBox1" runat="server" title="Text input">
          </asp:textbox>
          <asp:calendar id="Calendar1" runat="server" title="Personal Calendar" />
        </zonetemplate>
      </asp:webpartzone>
      <asp:button id="Button1" runat="server" text="Design Mode" 
        onclick="Button1_Click" />
      <br />
      <asp:button id="Button2" runat="server" onclick="Button2_Click" 
        text="Browse Mode" />
    </form>
</body>
</html>

To see how the workaround (described in the Remarks section) works, try adding a height attribute to the <asp:webpartzone> element, while keeping the DOCTYPE declaration in the page. You can use the following code to add the attribute to the tag:

Height="200px"

Run the page, and now both WebPart controls stretch to fill the explicitly declared height of the zone.

You can also experiment with this code example to observe the height-related rendering issue in the other scenario, which occurs when the zone's LayoutOrientation is set to Vertical. Remove the existing LayoutOrientation attribute and its value from the <asp:webpartzone> element, which will cause the zone's orientation to revert to the default vertical orientation. Set the height attribute on the <asp:webpartzone> element to 200 pixels, as you did above, and run the page. The zone's height looks too large, and the controls are not sized proportionately to the zone's height. Now remove the height attribute and run the page again. The controls now render relative to the height of the zone.

Remarks

Internet Explorer rendering modes can affect the height of a WebPart control and the height of the zone that contains it. Internet Explorer renders Web pages either in compatibility mode (backward compatible with previous browser versions) or in standards mode (determined by the presence of a DOCTYPE declaration in the page). For information about these modes, see the DHTML compatMode property.

When Internet Explorer renders a page in standards mode, under some circumstances it might not resize cells in tables, even when a cell's HTML markup is <td height="100%">. As a result, WebPart controls and their containing zone are rendered so that the controls do not stretch to the full height of the zone.

When Internet Explorer is in standard mode, controls do not render to stretch to their full height in the following cases:

  • When a zone's LayoutOrientation property is set to Vertical and you explicitly set the height on the zone. To enable controls to fill the full height of the zone, do not specify the height of a horizontally oriented zone.

  • When a zone's LayoutOrientation property is set to Horizontal and you do not explicitly set the height of the zone or of the contained controls. To enable controls to fill the full height of the zone, set the height of the zone or of the controls in a vertically oriented zone.

Applies to

See also