[CLOSED] Tab Content Scrolling

  1. #1

    [CLOSED] Tab Content Scrolling

    Hello,

    I am trying to setup a page at the moment that has a fit layout inside it making a panel take up the fullscreen, this panel has a toolbar and then a tabpanel as it's content. The tab panel takes up the screen fine, however, I want to make it so that when my custom control's content goes off the bottom of the screen the tab content panel becomes scrollable.

    The code below demonstrates what I have currently but I cannot figure out the changes needed to make the panels scroll. I believe they need a fixed height and the AutoScroll property set, however this is no good because the browser height my change as they resize/different screen resolution.

    <ext:ViewPort ID="ViewPort1" runat="server">
        <Body>
            <ext:FitLayout ID="fitLayout1" runat="server">
                <ext:Panel ID="pnlTabs" runat="server" Border="false">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:ToolbarButton ID="btnSave" Text="Save" Icon="Disk" Disabled="true">
                                </ext:ToolbarButton>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Body>
                        <ext:FitLayout ID="fl1" runat="server">
                            <ext:Panel ID="pnl1" runat="server" Border="false">
                                <Body>
                                    <ext:TabPanel ID="tabMain" runat="server" Border="false" EnableTabScroll="true">
                                        <Tabs>
                                            <ext:Tab ID="tab1" runat="server" Title="Tab 1" BodyStyle="margin: 10px;">
                                                <Body>
                                                        <isp:WebFormBuilder ID="fb1" runat="server" Width="670px">
                                                        </isp:WebFormBuilder>
                                                </Body>
                                            </ext:Tab>
                                            <ext:Tab ID="tab2" runat="server" Title="Tab 2" BodyStyle="padding: 10px;">
                                                <Body>
                                                        <isp:WebFormBuilder ID="fb2" runat="server" Width="670px">
                                                        </isp:WebFormBuilder>
                                                </Body>
                                            </ext:Tab>
                                        </Tabs>
                                    </ext:TabPanel>
                                </Body>
                            </ext:Panel>
                        </ext:FitLayout>
                    </Body>
                </ext:Panel>
            </ext:FitLayout>
        </Body>
    </ext:ViewPort>
  2. #2

    RE: [CLOSED] Tab Content Scrolling

    Hi,

    You need to wrap TabPanel by FitLayout (for example, remove pnl1) and set AutoScroll for each Tab
  3. #3

    RE: [CLOSED] Tab Content Scrolling

    That works perfect thank you!

Similar Threads

  1. [CLOSED] Scrolling dynamic content in an ext:Window
    By jwf in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 15, 2011, 11:08 PM
  2. [CLOSED] Scrolling issues
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Sep 07, 2011, 8:49 PM
  3. [CLOSED] Infinite Scrolling
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 09, 2011, 6:15 PM
  4. Replies: 0
    Last Post: Oct 19, 2010, 7:39 AM
  5. [CLOSED] Tab Scrolling
    By Immobilmente in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 23, 2008, 5:09 PM

Posting Permissions