2 Attachment(s)
Scrollbars disappear in a masterpage with viewport
Hello everyone.
I have a strange problem with the attribute "autoscroll"of which I can not find the solution.
If I use a viewport control with some contents in a single page the scrollbars are displayed correctly (see attached OnePage.jpg) if these controls are placed in a content page and the viewport in a masterpage the scrollbars disappear (see attached WithMasterPage.jpg).
Someone can explain to me what I'm missing?
This is the complete page.
Code:
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="Fit">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North>
<ext:Panel ID="pnlNorth" runat="server" Height="80" Border="false" Header="false">
<Content>
<p>
Page title here</p>
</Content>
</ext:Panel>
</North>
<West Collapsible="true" Split="true" MinWidth="175" MaxWidth="400" MarginsSummary="0 0 0 0"
CMarginsSummary="0 0 0 0">
<ext:Panel runat="server" Width="200" ID="pnlSettings" Title="Menu">
<Content>
<p>
Menu controls here</p>
</Content>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="Panel1" runat="server" Header="false" Layout="Fit">
<Content>
<ext:Panel ID="Panel10" runat="server" Title="Title" AutoScroll="true" Border="false">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnSave" runat="server" Text="Button1" AutoPostBack="True">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Content>
<ext:Panel ID="Panel6" runat="server" Header="false" Border="false">
<Content>
<ext:Panel ID="Panel5" runat="server" Border="false" Title="Panel" BodyStyle="padding: 10px 0 10px 0;">
<Content>
<div style="height: 300px;">
<p>
Some content here</p>
</div>
</Content>
</ext:Panel>
<ext:TabPanel ID="TabPanel1" runat="server" Border="false">
<Items>
<ext:Panel ID="Panel4" runat="server" Title="Tab1">
<Content>
<div style="height: 300px;">
<p>
Some content here</p>
</div>
</Content>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Title="Tab2">
<Content>
<div style="height: 300px;">
<p>
Some content here</p>
</div>
</Content>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel ID="Panel2" runat="server" Border="false" Title="Panel">
<Content>
<div style="height: 300px;">
Some content here</div>
</Content>
</ext:Panel>
</Content>
</ext:Panel>
</Content>
</ext:Panel>
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
While this is divided in master / content.
Masterpage:
Code:
<ext:resourcemanager id="ResourceManager1" runat="server">
</ext:resourcemanager>
<ext:viewport id="Viewport1" runat="server" layout="Fit">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North>
<ext:Panel ID="pnlNorth" runat="server" Height="80" Border="false" Header="false">
<Content>
<p>
Page title here</p>
</Content>
</ext:Panel>
</North>
<West Collapsible="true" Split="true" MinWidth="175" MaxWidth="400" MarginsSummary="0 0 0 0"
CMarginsSummary="0 0 0 0">
<ext:Panel runat="server" Width="200" ID="pnlSettings" Title="Menu">
<Content>
<p>
Menu controls here</p>
</Content>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="Panel1" runat="server" Header="false" Layout="Fit">
<Content>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:viewport>
Content page:
Code:
<ext:Panel ID="Panel10" runat="server" Title="Title" AutoScroll="true" Border="false">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnSave" runat="server" Text="Button1" AutoPostBack="True">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Content>
<ext:Panel ID="Panel6" runat="server" Header="false" Border="false">
<Content>
<ext:Panel ID="Panel5" runat="server" Border="false" Title="Panel" BodyStyle="padding: 10px 0 10px 0;">
<Content>
<div style="height: 300px;">
<p>
Some content here</p>
</div>
</Content>
</ext:Panel>
<ext:TabPanel ID="TabPanel1" runat="server" Border="false">
<Items>
<ext:Panel ID="Panel4" runat="server" Title="Tab1">
<Content>
<div style="height: 300px;">
<p>
Some content here</p>
</div>
</Content>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Title="Tab2">
<Content>
<div style="height: 300px;">
<p>
Some content here</p>
</div>
</Content>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel ID="Panel2" runat="server" Border="false" Title="Panel">
<Content>
<div style="height: 300px;">
Some content here</div>
</Content>
</ext:Panel>
</Content>
</ext:Panel>
</Content>
</ext:Panel>
Thanks for the help.
