Height of TabPanel content

  1. #1

    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:	167 
Size:	73.8 KB 
ID:	3938

    Thank you !!!
    Last edited by Chuck; Mar 14, 2012 at 12:11 AM.
  2. #2
    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
    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
    Please set up
    Layout="FitLayout"
    for the Panel which is the container of the TabPanel.
  5. #5
    Thanks, unfortunately, it doesn't work...
  6. #6
    Ok, as you said, sorry.

    Thanks a lot :)
    Last edited by Chuck; Mar 14, 2012 at 10:15 PM.
  7. #7
    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
    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
    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
    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 10: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, 1: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, 4:49 PM
  3. [CLOSED] Height TabPanel
    By majunior in forum 1.x Legacy Premium Help
    Replies: 30
    Last Post: Apr 08, 2011, 10:48 AM
  4. [CLOSED] Tabpanel height Fit
    By majestic in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 07, 2010, 10: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, 5:17 AM

Posting Permissions