[CLOSED] Scrollbars are not showing up on panels

  1. #1

    [CLOSED] Scrollbars are not showing up on panels

    So I have a page with grid panels inside of tab panels and I cannot get the scrollbars to show up. Unfortunately when I strip everything out for an example to post, they show up and work fine. I just can't find the piece that causes them to stop showing up.

    Since I can't reproduce the problem with a simple example I'm hoping you can guide me on what to look for when inspecting the elements with Chrome developer tools, try to find the cause.

    Here is the basic structure of the page, and again, this example works fine, it's when I "wire everything back up" I lose the scrollbars. The "real" code has a master page, stylesheets, javascript, direct events etc. but this is the basic structure

        <ext:TabPanel runat="server" 
            ActiveIndex="0"
            Header="true"
            Border="false"
            AutoScroll="true"
            Layout="FitLayout">
            <Items>
                <ext:Panel ID="pnlModelHoldings" Title="Model Holdings" runat="server" Layout="FitLayout" AutoScroll="true" Border="false">
                    <DockedItems>
                        <ext:Toolbar Border="false" runat="server">
                            <Items>
                                <ext:TextField runat="server" ID="notifyOnExit" hidden="true"></ext:TextField>
                                <ext:Button ID="btnDonut" runat="server" Icon="ChartPie" ToolTip="Allocation Chart">
                                </ext:Button>
                                <ext:Label runat="server" Text="Weight:" StyleSpec="padding-top:2px"></ext:Label>
                                <ext:Label runat="server" ID="lblTotalWeight" Text="0.00%" StyleSpec="padding-top:2px"></ext:Label>
                                <ext:ToolbarSeparator runat="server" ></ext:ToolbarSeparator>
                                <ext:Label runat="server" ID="lblModelState" ></ext:Label>
                                <ext:ToolbarFill runat="server"></ext:ToolbarFill>
                            </Items>
                        </ext:Toolbar>
                    </DockedItems>
                    <Items>
                        <ext:GridPanel ID="grdModelHoldings" runat="server" Border="false" >
                            <HtmlBin>
                                <ext:XScript ID="XScript1" runat="server">
                                    <script type="text/javascript">
                                        function setConfirmText(msg, command, symbol) {
                                            if (command == 'Delete') {
                                                msg.message = 'Are you sure you want to delete the allocation for ' + symbol + '?';
                                                return true;
                                            }
                                            return false;
                                        }
                                    </script>
                                </ext:XScript>
                            </HtmlBin>
                            <Store>
                                <ext:Store ID="StoreModelHoldings" runat="server">
                                    <Model>
                                        <ext:Model runat="server" Name="AllocationModel">
                                            <Fields>
                                                <ext:ModelField Name="ID"></ext:ModelField>
                                                <ext:ModelField Name="Description"></ext:ModelField>
                                                <ext:ModelField Name="Name"></ext:ModelField>
                                                <ext:ModelField Name="Symbol"></ext:ModelField>
                                                <ext:ModelField Name="DoNotBuy" Type="Boolean"></ext:ModelField>
                                                <ext:ModelField Name="DoNotSell" Type="Boolean"></ext:ModelField>
                                                <ext:ModelField Name="Allocation" Type="Float"></ext:ModelField>
                                                <ext:ModelField Name="Shares" Type="Int"></ext:ModelField>
                                                <ext:ModelField Name="Value" ></ext:ModelField>
                                                <ext:ModelField Name="Price" type="Float"></ext:ModelField>
                                                <ext:ModelField Name="IsValidMorningStar" Type="Boolean"></ext:ModelField>
                                                <ext:ModelField Name="IsDirty" Type="Boolean"></ext:ModelField>
                                                <ext:ModelField Name="IsNew" Type="Boolean"></ext:ModelField>
                                                <ext:ModelField Name="Editable" Type="Boolean"></ext:ModelField>
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column ID="cmID" runat="server" DataIndex="ID" Hidden="true"></ext:Column>
                                    <ext:Column runat="server" Flex="1" DataIndex="Description" Text="Description" ></ext:Column>
                                    <ext:Column runat="server" DataIndex="Name" Text="Cusip"></ext:Column>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
    
                <ext:Panel ID="pnlAuditHistory" Border="false" Title="Audit/History" runat="server">
                    <Items>
                        <ext:GridPanel Border="false" Padding="5" runat="server" ID="grdAuditHistory">
                            <Store>
                                <ext:Store runat="server" ID="StoreAuditHistory">
                                    <Fields>
                                        <ext:ModelField Name="ID"></ext:ModelField>
                                        <ext:ModelField Name="LastPublished"></ext:ModelField>
                                    </Fields>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:DateColumn Flex="1" runat="server" text="Last Published" DataIndex="LastPublished"  Format="M/d/yyyy h:mm:ss A" ></ext:DateColumn>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
    
        </ext:TabPanel>
    Last edited by fabricio.murta; May 04, 2017 at 8:44 PM.
  2. #2
    Hello @rmelancon!

    Hard to say anything without being able to reproduce the issue, but what I can advise you with is right-clicking the panel, then 'inspect' and fiddle in with CSS rules, enabling some, disabling others.

    It can sometimes help you find why a scrollbar is not taking place where it should by adding the inline style border: 1px solid red (or other color as you walk thru other containers). This way you can see whether a box (for example an inner panel with forced height enough to show contents) with no scrolling is lying around.

    Try to copy over the whole case somewhere and then successively remove parts of the code, always ready to ctrl+z (undo). When you remove something that makes the problem go away, undo that, and then dive in the chunk you removed. Maybe the first thing to try and remove is the master page dependency, that would simplify the sample to work with dramatically. Actually, you may try to start without the master page then, only if it is required to reproduce, then add the full master page and start the trim down from that master page.

    Well, I hope these directions help you figuring this issue out!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks, that's the kind of guidance I was looking for.
  4. #4
    Well, alright, so, I'm not sure how to proceed here. Should we mark this as closed now, or do you want us to keep it open before you post any more feedback on this?

    If looking for insight, this thread about simplifying test cases might be of help too: Tips for creating simplified code samples.

    Please let us know if we can help you in anything else.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    I got it from here, thanks.

Similar Threads

  1. Replies: 3
    Last Post: Mar 22, 2017, 6:42 PM
  2. [CLOSED] Page not showing Panels and data
    By csaini in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 19, 2016, 8:25 PM
  3. [CLOSED] Showing scrollbars of browser with javascript and viewport
    By supera in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 12, 2014, 3:30 PM
  4. [CLOSED] Using Layout accordion card showing all Panels every time
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 14, 2012, 1:29 PM
  5. Replies: 3
    Last Post: Sep 27, 2011, 1:41 PM

Posting Permissions