Resizeing in MasterPage layout

The WebSplitter is not resizing correctly in a Master Page layout.  I want the WebSplitter to take up full height and width of the content area but it does not.  It does not resize at all.  Here is the code using a MasterPage layout:

 

<%@ Page Title=”” Language=”vb” AutoEventWireup=”false” MasterPageFile=”~/Site.Master”
CodeBehind=”UserMgt.aspx.vb” Inherits=”NP2000.UserMgt” %>

<%@ Register Assembly=”Infragistics35.Web.v9.1, Version=9.1.20091.1015, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb”
Namespace=”Infragistics.Web.UI.LayoutControls” TagPrefix=”ig” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
<style type=”text/css”>
html, body, form, .tallElement
{
height: 100%;
}
</style>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
<ig:WebSplitter ID=”WebSplitter1″ runat=”server” DynamicResize=”True” Height=”100%”
Width=”100%” CssClass=”tallElement”>
<Panes>
<ig:SplitterPane runat=”server”>
</ig:SplitterPane>
<ig:SplitterPane runat=”server”>
</ig:SplitterPane>
</Panes>
</ig:WebSplitter>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
</asp:Content>

 

Here is the same code NOT using a MasterPage layout.  As you can see the splitter code is exactly the same, but the effect is totally different.

<%@ Page Language=”vb” AutoEventWireup=”false” CodeBehind=”WebForm1.aspx.vb” Inherits=”NP2000.WebForm1″ %>

<%@ Register Assembly=”Infragistics35.Web.v9.1, Version=9.1.20091.1015, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb”
Namespace=”Infragistics.Web.UI.LayoutControls” TagPrefix=”ig” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>
<style type=”text/css”>
html, body, form, .tallElement
{
height: 100%;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<ig:WebSplitter ID=”WebSplitter1″ runat=”server” DynamicResize=”True” Height=”100%”
Width=”100%” CssClass=”tallElement”>
<Panes>
<ig:SplitterPane runat=”server”>
</ig:SplitterPane>
<ig:SplitterPane runat=”server”>
</ig:SplitterPane>
</Panes>
</ig:WebSplitter>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>    </form>
</body>
</html>

 

Hi mflach,

If you look at html generated by server, then it should be clear why it happens.

In case of master page, which is generated by visual studio by default, you probably will find that the ContentPlaceHolder is wrapped into DIV and that is the reason for all sorts of misbehavior. Similar default DIV wrapper is generated for all aspx forms as well, and most applications remove that annoing dummy (like you did in your attached sample).

You may fix that by one of the following:

1. Remove DIV wrapper for ContentPlaceHolder in your master page.

2. Add style="height:100%" to DIV which wraps ContentPlaceHolder with WebSplitter.

Sorry, neither approach worked. Can you provide a simple application that illustrates this technique?

Mark <><

I've done some more investigating and it appeares that when the websplitter is within a Master Page layout, the onResize does not correctly adjust the height of the control.  It looks like you have some javascript that is run when the browser is resized.  That event triggers a resize of the control which resizes the height attribute.  This functions properly when the control is outside a contentplaceholder but does not run correctly from within a contentplaceholder.

Mark <><

Hi Mark,

Your master page is probably looks like

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </div>
  </form>
</body>
</html>

The problem which I referred to, was in DIV wrapper. You may remove it completely or add style="height:100%" to it.

If problem will still persist, then try explicitly set style="height:100%" to all parents of content within your master page:

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body style="height:100%">
  <form id="form1" runat="server" style="height:100%">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
  </form>
</body>
</html>

As I've said, I tried each approach and neither worked.  The problem looks to be related to the resize event for the websplitter, not the div.

 

BTW: I'm using .NET 2009.1

Mark <><