[CLOSED] Column Layout doesn't expand in TabPanel Body
I have a columnlayout control with two LayoutColumns set for .5 each located inside a Tab Body. When I run the page, it will not adjust to .5% of the page until I resize the page. Outside of the tab body it works fine.
Code:
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="300">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1">
<Body>
</Body>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Tab 2">
<Body>
</Body>
</ext:Tab>
<ext:Tab ID="Tab3" runat="server" Title="Tab 3">
<Body>
<ext:Panel ID="Panel13" runat="server">
<Body>
<ext:ColumnLayout ID="ColumnLayout4" runat="server">
<ext:LayoutColumn ColumnWidth=".5">
<ext:Panel ID="Panel14" runat="server" Border="false" Header="false">
<Body>
<ext:FormLayout ID="FormLayout7" runat="server" LabelAlign="Top">
<Anchors>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField8" runat="server" FieldLabel="First Name" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField9" runat="server" FieldLabel="Company" />
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth=".5">
<ext:Panel ID="Panel15" runat="server">
<Body>
<ext:FormLayout ID="FormLayout8" runat="server" LabelAlign="Top">
<Anchors>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField10" runat="server" FieldLabel="Last Name" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField11" runat="server" FieldLabel="Email" />
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:Panel>
<ext:Panel ID="Panel16" runat="server">
<Body>
<ext:FormLayout ID="FormLayout9" runat="server" LabelAlign="Top">
<Anchors>
<ext:Anchor Horizontal="98%">
<ext:HtmlEditor ID="HtmlEditor1" runat="server" Height="200" FieldLabel="Biography" />
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Body>
</ext:Panel>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
RE: [CLOSED] Column Layout doesn't expand in TabPanel Body
Hi,
1. Wrap panels in the third tab by ContainerLayout
2. Add LayoutOnTabChange="true" to the TabPanel
Code:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form runat="server">
<ext:ScriptManager runat="server" />
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Height="300" LayoutOnTabChange="true">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1">
<Body>
</Body>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Tab 2">
<Body>
</Body>
</ext:Tab>
<ext:Tab ID="Tab3" runat="server" Title="Tab 3">
<Body>
<ext:ContainerLayout runat="server">
<ext:Panel ID="Panel13" runat="server">
<Body>
<ext:ColumnLayout ID="ColumnLayout4" runat="server">
<ext:LayoutColumn ColumnWidth=".5">
<ext:Panel ID="Panel14" runat="server" Border="false" Header="false">
<Body>
<ext:FormLayout ID="FormLayout7" runat="server" LabelAlign="Top">
<Anchors>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField8" runat="server" FieldLabel="First Name" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField9" runat="server" FieldLabel="Company" />
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth=".5">
<ext:Panel ID="Panel15" runat="server">
<Body>
<ext:FormLayout ID="FormLayout8" runat="server" LabelAlign="Top">
<Anchors>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField10" runat="server" FieldLabel="Last Name" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:TextField ID="TextField11" runat="server" FieldLabel="Email" />
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
</ext:Panel>
<ext:Panel ID="Panel16" runat="server">
<Body>
<ext:FormLayout ID="FormLayout9" runat="server" LabelAlign="Top">
<Anchors>
<ext:Anchor Horizontal="98%">
<ext:HtmlEditor ID="HtmlEditor1" runat="server" Height="200" FieldLabel="Biography" />
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:ContainerLayout>
</Body>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</form>
</body>
</html>
RE: [CLOSED] Column Layout doesn't expand in TabPanel Body
Thank you that fixed the problem.
Howard