PDA

View Full Version : Tab width problem



abressan
Apr 29, 2008, 4:10 PM
Hi all,

I have a TabPanel inside a Panel. the outside panel was adjusting automatically to the screen width just fine, until I put the inner TabPanel, which is just causing the screen to overflow to the right margin a lot.

I'm putting this panels like this:



...
<cool:Panel ID="ClaimSearch" runat="server" Title="Claim Search">
<Content>

<cool:TabPanel ID="claimSearchFilter" runat="server" ActiveTab="0" Height="120px">
...



What should I do to ensure that the inner TabPanel adjust itself to the size of its container, without change the size of this later?

the only way I found so far is putting an explicit width in the tabpanel, but that's not what I need...

Thanks a lot in advance,

Regards,

Aldo

geoffrey.mcgill
May 21, 2008, 7:59 AM
I apologize for the delay in getting back to you. We've been working like mad to get v0.5 out the door, but delays keep popping up. I think the v0.5 release should fix any width issues.

I'm not sure what's up with the width problem in v0.4, but I've tested a couple different scenarios in v0.5 and everything appears to work correctly.

What browser(s) are you having this problem on? Can you post a full .aspx sample which demonstrates how to reproduce the problem.

With v0.5 we're including a new FitLayout control. The FitLayout will stretch a nested container (i.e. Panel) to fill it's height/width 100%. This might be another option to solve the problem.

stevenoc
May 28, 2008, 5:27 AM
Hi Geoffrey,

I've trying to make use of the FitLayout to limit the width of the TabPanel, but I'm having no success (may just be that I'm not using the control in the right context)

My code is as follows:


<%@ Page Language="C#" AutoEventWireup="true" Title="Default Page" %>


<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{


}
</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Default Page</title>
</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager ID="extScriptManager" runat="server" CleanResourceUrl="True" Theme="Gray" />
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTab="0" Height="1" Title="TabPanel">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1">
<Content>
</Content>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Tab 2">
<Content>
</Content>
</ext:Tab>
<ext:Tab ID="Tab3" runat="server" Title="Tab 3">
<Content>
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>
<br />
<hr />
<br />
<ext:Panel ID="Panel1" runat="server" Height="200" Title="Test Panel (3 Column Table)" Header="True">
<Content>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td >
<ext:Panel ID="Panel2" runat="server" Height="100" Width="250" Title="West Region (1st Column)">
<Content>
</Content>
</ext:Panel>
</td>
<td>
<ext:Panel ID="Panel4" runat="server" Height="100" Title="Center Region (2nd Column) With TabPanel">
<Content>
<ext:FitLayout ID="FitLayout1" runat="server" >
<ext:TabPanel ID="TabPanel2" runat="server" ActiveTab="0" Height="1" Title="TabPanel">
<Tabs>
<ext:Tab ID="Tab4" runat="server" Title="Tab 4">
<Content>
</Content>
</ext:Tab>
<ext:Tab ID="Tab5" runat="server" Title="Tab 5">
<Content>
</Content>
</ext:Tab>
<ext:Tab ID="Tab6" runat="server" Title="Tab 6">
<Content>
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</td>
<td >
<ext:Panel ID="Panel3" runat="server" Height="100" Width="250" Title="East Region (3rd Column)">
<Content>
</Content>
</ext:Panel>
</td>
</tr>
</table>
</Content>
</ext:Panel>
<br />
<hr />
<br />
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td >
<ext:Panel ID="Panel5" runat="server" Height="100" Width="250" Title="West Region (1st Column)">
<Content>
</Content>
</ext:Panel>
</td>
<td>
<ext:Panel ID="Panel6" runat="server" Height="100" Title="Center Region (2nd Column) With TabPanel">
<Content>
<ext:FitLayout ID="FitLayout2" runat="server" >
<ext:TabPanel ID="TabPanel3" runat="server" ActiveTab="0" Height="1" Title="TabPanel">
<Tabs>
<ext:Tab ID="Tab7" runat="server" Title="Tab 7">
<Content>
</Content>
</ext:Tab>
<ext:Tab ID="Tab8" runat="server" Title="Tab 8">
<Content>
</Content>
</ext:Tab>
<ext:Tab ID="Tab9" runat="server" Title="Tab 9">
<Content>
</Content>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</td>
<td >
<ext:Panel ID="Panel7" runat="server" Height="100" Width="250" Title="East Region (3rd Column)">
<Content>
</Content>
</ext:Panel>
</td>
</tr>
</table>


</form>
</body>
</html>


As you can see, I have 3 tabpanels on the page.
The first limits its width to that of the page, but the second and third do not.

If you have any ideas as to how I may go about this, I would be appreciative.

Kind Regards
Steven O'Connor