May 07, 2015, 7:34 PM
[CLOSED] Responsive using viewport and missing scrollbar
Hi, I'm trying to get responsive working on a master page. This following code works except that it doesn't let you scroll down the page on mobile and when resizing on desktop.
When I add autoscroll = 'true' on the nested panel inside the viewport, it cancels out the responsive width.
I noticed that on the Ext.NET example here: https://examples3.ext.net/#/Miscella...ponsive/Basic/ a similar thing happens. When the page is resized on desktop no scrollbar appears. However, when viewing it using mobile a scrollbar does appear. How did you get the scrollbar to appear on mobile!?
When I add autoscroll = 'true' on the nested panel inside the viewport, it cancels out the responsive width.
I noticed that on the Ext.NET example here: https://examples3.ext.net/#/Miscella...ponsive/Basic/ a similar thing happens. When the page is resized on desktop no scrollbar appears. However, when viewing it using mobile a scrollbar does appear. How did you get the scrollbar to appear on mobile!?
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray"/>
<ext:Viewport runat="server" Layout="FitLayout" >
<Items>
<ext:Panel runat="server" Layout="FitLayout" >
<ResponsiveConfig>
<ext:ResponsiveRule Rule="width <= 400">
<Config>
<ext:Panel Title="width <= 400" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
<ResponsiveConfig>
<ext:ResponsiveRule Rule="width > 400">
<Config>
<ext:Panel Title="width > 400" runat="server" />
</Config>
</ext:ResponsiveRule>
</ResponsiveConfig>
<Items>
<ext:Panel runat="server" >
<Items>
<%--Header--%>
<ext:Container runat="server" ID="ctnHeader" >
<LayoutConfig>
<ext:HBoxLayoutConfig align="stretch" />
</LayoutConfig>
<Items>
<ext:Image ID="ImgLogo" runat="server" ImageUrl="Images/banner-image.png" AlternateText="Grad Readmission Logo" Cls="header"/>
<ext:DisplayField ID="dfSiteName" runat="server" Html="College of LAS Graduate Readmission" FieldCls="site-name"/>
</Items>
</ext:Container>
</Items>
<Content>
<%--Main--%>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<%--Footer--%>
<div id="footer">
<div class="contact-info">
<a href="http://www.depaul.edu/Pages/disclaimer.aspx" target="_blank">Disclaimer</a>
</div>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
<Listeners>
<AfterRender Handler=" var header = Ext.DomHelper.createDom('Header');
this.getEl().insertFirst(header);" />
</Listeners>
</ext:Viewport>
</form>
Last edited by Daniil; May 16, 2015 at 7:40 AM.
Reason: [CLOSED]
