Sep 02, 2009, 12:39 PM
[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.
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>