What's New?

Height of TabPanel content

  1. #1
    Mar 13, 2012, 10:59 PM

    Height of TabPanel content

    Hi all,

    I have a problem with the height of the content of my panel in a TabPanel.

    My code is:

    <ext:ViewPort ID="ViewPort1" runat="server" >
    <Items>
        <ext:FitLayout ID="FitLayout1" runat="server" >    
            <Items>
                <ext:Panel ID="uxMain" runat="server" Border="false" BodyStyle="padding: 5px 5px 5px 5px">
                     <Items>                                        
                                    <ext:TabPanel ID="TabPanel1" runat="server" LayoutOnTabChange="true">                                                
                                        <Items>
                                            <ext:Panel ID="uxPnEpisodesIncomplets" runat="server" Title="Épisodes (et données sous-jacentes) incomplets">
                                                <Items>
                                                    <ext:ColumnLayout ID="ColumnLayout1" runat="server">
                                                        <Columns>
                                                            <ext:LayoutColumn ColumnWidth="0.5">
                                                                <ext:GridPanel ID="uxGpPersonnesIncompletes" 
                                                                               Title="Personnes" 
                                                                               runat="server" 
                                                                               StoreID="storePersonnesIncompletes"
                                                                               TrackMouseOver="true" 
                                                                               StripeRows="true" 
                                                                               StyleSpec="padding: 5px 5px 5px 5px">
............................
..............
........
    How can I use the full height of the TabPanel with my GridPanel (to extend ID="uxPnEpisodesIncomplets" to bottom) ? Presently, it looks like this image:
    (The code above begins at the second TabPanel you can see, it's an iFrame)
    Click image for larger version.  Name: temp.jpg  Views: 245  Size: 73.8 KB  ID: 3938

    Thank you !!!
    Last edited by Chuck; Mar 13, 2012 at 11:11 PM.
  2. #2
    Mar 14, 2012, 7:07 PM
    Hi,

    Your layout configuration looks correct. I think the problem might lay on the parent page.

    Please provide a full, but simplified, sample to reproduce.
  3. #3
    Mar 14, 2012, 8:40 PM
    Thanks for your answer Daniil !

    Here is my simplified code:

    <%@ Page Language="C#" %>  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
    }
</script>
  
<!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 id="Head1" runat="server">
<title>Ext.Net Example</title>
</head>
<body>
<form id="Form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport runat="server">
<Items>
<ext:FitLayout ID="FitLayout1" runat="server">
    <Items>            
        <ext:Panel runat="server" Border="false" MinWidth="1050" >
            <Content>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North> 
                    </North>
                    <Center>
                        <ext:Panel runat="server" Title="Accueil" BodyStyle="padding: 5px 5px 5px 5px">
                            <Content>
                                <ext:FitLayout runat="server" >
                                    <Items>
                                        <ext:TabPanel runat="server" LayoutOnTabChange="true"  >
                                            <Items>
                                                <ext:Panel ID="uxPnPublications" runat="server" Title="First TabPanel" AutoScroll="True" HideMode="Offsets">                                                                                                   
                                                    <Content>
                                                        <ext:FitLayout ID="FitLayout2" runat="server" >    
                                                            <Items>
                                                                <ext:Panel runat="server" Border="false" BodyStyle="padding: 5px 5px 5px 5px">                                                                      
                                                                    <Items>                                        
                                                                        <ext:TabPanel runat="server" LayoutOnTabChange="true" >                                                
                                                                            <Items>                                                                           
                                                                                <ext:Panel ID="uxPnEpisodesIncomplets" runat="server" Title="Second TabPanel" >
                                                                                    <Items>                                    
                                                                                        <ext:ColumnLayout ID="ColumnLayout1" runat="server" >
                                                                                            <Columns>
                                                                                                <ext:LayoutColumn ColumnWidth="0.5">                                                                                                
                                                                                                    <ext:Panel runat="server" BodyStyle="padding: 5px 5px 5px 5px">
                                                                                                    <Content>
                                                                                                    <ext:TextArea runat="server" Text="Column1" Height="200"></ext:TextArea>
                                                                                                    </Content>
                                                                                                    </ext:Panel>                                                                                        
                                                                                                </ext:LayoutColumn>
                                                                                                <ext:LayoutColumn ColumnWidth="0.5">
                                                                                                    <ext:Panel ID="Panel1" runat="server" BodyStyle="padding: 5px 5px 5px 5px" >
                                                                                                    <Content>
                                                                                                    <ext:TextArea ID="TextArea1" runat="server" Text="Column1" ></ext:TextArea>
                                                                                                    </Content>
                                                                                                    </ext:Panel>
                                                                                                </ext:LayoutColumn>
                                                                                            </Columns>
                                                                                        </ext:ColumnLayout> 
                                                                                    </Items>
                                                                                </ext:Panel>
                                                                            </Items>
                                                                        </ext:TabPanel>
                                                                    </items>
                                                                </ext:Panel>
                                                            </Items>
                                                        </ext:FitLayout>
                                                    </content>                                                        
                                                </ext:Panel>
                                            </Items>                                            
                                        </ext:TabPanel>
                                    </Items>
                                </ext:FitLayout>
                            </Content>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Content>
        </ext:Panel>
    </Items>
</ext:FitLayout>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
    Thanks again !
  4. #4
    Mar 14, 2012, 8:43 PM
    Please set up
    Layout="FitLayout"
    for the Panel which is the container of the TabPanel.
  5. #5
    Mar 14, 2012, 8:54 PM
    Thanks, unfortunately, it doesn't work...
  6. #6
    Mar 14, 2012, 9:10 PM
    Ok, as you said, sorry.

    Thanks a lot :)
    Last edited by Chuck; Mar 14, 2012 at 9:15 PM.
  7. #7
    Mar 14, 2012, 9:14 PM
    You should set up only one Layout="FitLayout".

    Quote Originally Posted by Daniil View Post
    Please set up
    Layout="FitLayout"
    for the Panel which is the container of the TabPanel.
    I meant the second TabPanel.
  8. #8
    Mar 14, 2012, 9:17 PM
    I edited my previous message, it's excellent, all is ok !!

    A little question, is it normal that your new web site "examples.ext.net" (2.0) doesn't work with Chrome ?
  9. #9
    Mar 14, 2012, 9:21 PM
    Quote Originally Posted by Chuck View Post
    A little question, is it normal that your new web site "examples.ext.net" (2.0) doesn't work with Chrome ?
    I've just checked - the site appears to be working correctly on my side in Chrome.

    Please clarify what Chrome version are you testing with?
  10. #10
    Mar 14, 2012, 9:31 PM
    Version: 17.0.963.78 m ...

    But I took the opportunity to update and now it works with the latest version... but the last is 17.0.963.7"9" m... strange...

    Anyway, thanks for your help !!
    Last edited by Chuck; Mar 14, 2012 at 9:35 PM.

Similar Threads

  1. [CLOSED] FieldSet height depending on content
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jul 18, 2012, 12:18 AM
  2. [CLOSED] Automatic window height based on content
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 28, 2011, 3:49 PM
  3. [CLOSED] Height TabPanel
    By majunior in forum 1.x Legacy Premium Help
    Replies: 30
    Last Post: Apr 08, 2011, 9:48 AM
  4. [CLOSED] Tabpanel height Fit
    By majestic in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 07, 2010, 9:36 PM
  5. [CLOSED] TabPanel with 100% height in html table
    By acrossdev in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 12, 2009, 4:17 AM

Posting Permissions