Dear Sir,

I had created page that content will be center (please see image below) like this forum
with HBoxLayout.

Click image for larger version.  Name: layout.jpg  Views: 125  Size: 67.6 KB  ID: 4632

In HBoxLayout contain VBoxLayout panel that has 3 panel eg. Header panel (Region="North"),
Content TabPanel (Region="Center") and Footer panel (Region="South")

If content in TabPanel height more than Screen height it not show vertical scrollbar.

How to fix it, please advice.


Thank you very much.

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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 id="Head1" runat="server">
    <title>Sample</title>    
    <link rel="stylesheet" type="text/css" href="resources/css/examples.css" />
    <style type="text/css">  
        body 
        {
           	background-image: url("resources/images/bg.gif");
        }
        .transparent-window,
        .transparent-window .x-window-body,
        .transparent-window .x-panel-body 
        {
            background-color: Transparent;
        }
        .transparent-panel 
        {
        	background-color: Transparent;
        }
        .x-panel-body {border:1px solid #aaa;border-top:none;border-bottom:none;}      
        .ovTabStrip .x-panel-body {border:none;} 
		.ovTabStrip .x-tab-strip span .x-tab-strip-text {font-size:15px !important;font-weight: normal !important;color: #006633 !important;text-align:center !important;}
        .ovTabStrip .x-tab-strip-active span .x-tab-strip-text {font-weight: bold !important;color: #006600 !important;} 
    </style>
</head>

<body>
	
<form id="formWorkers" runat="server">
	
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

    <ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout">
        <LayoutConfig>
            <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
        </LayoutConfig>
        <Items>
            <ext:Panel ID="Panel1" runat="server" Width="960" Layout="VBoxLayout" Border="true" >
                <Items>
                    <ext:Panel ID="HeaderPanel" 
                        runat="server"
                        Region="North"
                        Height="120"
                        Split="false"              
			            Border="false"
			            HideBorders="true">
                        <Items>
                            <ext:Panel ID="Banner" runat="server" Width="960" Html="<center><H1>HEADER BANNER</H1><center>" />
                        </Items>
                    </ext:Panel>
                    <ext:TabPanel ID="ContenPanel" 
                        runat="server"
                        Region="Center"
                        Split="false"
                        MinTabWidth= "157"
                        TabWidth= "157"  
                        Width="960"                           
                        margins="0 0 0 0"                              
                        Cls="ovTabStrip"
                        Border="false"                        
			            Flex="1" >
                        <Items> 
                            <ext:Panel runat="server" ID="HomeTab" Title="HOME" Width="960" Padding="0" AutoScroll="true"
                             Html="1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
                                     1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
                                     1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
                                     1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
                                     1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
                                     1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />">                              
                            </ext:Panel>
                            <ext:Panel runat="server" ID="ResourcesTab" Title="RESOURCES" Width="960" Padding="6">
                            </ext:Panel>
                            <ext:Panel runat="server" ID="OpacTab" Title="SEARCH" Width="960" Padding="6">
                            </ext:Panel>                                    
                            <ext:Panel runat="server" ID="MemberTab" Title="MEMBER" Width="960" Padding="6">
                            </ext:Panel>                         
                            <ext:Panel runat="server" ID="EventsTab" Title="EVENTS" Width="960" Padding="6">
                            </ext:Panel>
                            <ext:Panel runat="server" ID="ContactTab" Title="CONTACT US" Width="960" Padding="6">
                            </ext:Panel>
                        </Items>                        
                    </ext:TabPanel>
                    <ext:Panel ID="FooterPanel" 
                        runat="server"
                        Region="South"
                        Height="41"
                        Split="false"
			            Border="false"
			            StyleSpec="border-top:1px solid #aaa;"
			            HideBorders="true">                        
                        <Items>
                            <ext:panel ID="footerBanner" runat="server" Width="960" Html="<center><H3>FOOTER BANNER</H3></center>" />
                        </Items>
                    </ext:Panel>                    
                </Items>                
            </ext:Panel>
        </Items>
    </ext:Viewport>
	
</form> 
</body>
</html>