[CLOSED] Responsive using viewport and missing scrollbar

  1. #1

    [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!?

    <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]
  2. #2
    Hi @jtorkels,

    I noticed that on the Ext.NET example https://examples3.ext.net/#/Miscella...sponsive/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!?
    I don't quite have any idea why it appears on mobile. Maybe, some mobile specific feature.

    Actually I expect that it doesn't appear because the Panel (a tab) doesn't have a AutoScroll="true" setting. If set it, then a scrollbar appears on desktop as well. I just checked.

    When I add autoscroll = 'true' on the nested panel inside the viewport, it cancels out the responsive width.
    Sorry, I don't understand what exactly it cancels. A full test case would be appreciated. Ideally, without a dependance on the master page. Or is it reproducible with a master page only?
  3. #3
    Thanks for the tip. I reworked the code without the master page and then added the master page back in and finally got it working.

    I added AutoScroll = "true" to the nested panel.

    What I omitted from my original post is that part of my footer is set to float left and another part floats right. This poses a problem when the horizontal scrollbar appears. It cancels out the responsiveness of the width of the page. Meaning the float left and right parts of the footer don't respond when resizing the width of the page since the scrollbar is there. The only work around that I could find was to add this css to the formPanel that's inside the main content placeholder and set it to a finite width.

    .alignCenter 
    {
       width: 320px;  
       margin: 0 auto;
    }
  4. #4
    Thank you for sharing a solution on the problem! It might be helpful to others.

Similar Threads

  1. Responsive Examples
    By RCN in forum Examples and Extras
    Replies: 5
    Last Post: Dec 07, 2015, 12:04 PM
  2. Replies: 9
    Last Post: Mar 04, 2015, 7:59 PM
  3. [CLOSED] Horizontal Scrollbar in GridPanel missing.
    By Z in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 10, 2012, 12:12 PM
  4. V1.0 How to show the viewport's scrollbar?
    By jachnicky in forum 1.x Help
    Replies: 1
    Last Post: Apr 04, 2011, 10:51 AM
  5. Replies: 2
    Last Post: Jul 08, 2009, 5:16 PM

Tags for this Thread

Posting Permissions