New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ext.menu.Menu constrained by body height are wrongly positioned #1607

Closed
fabriciomurta opened this Issue Aug 10, 2018 · 1 comment

Comments

Projects
None yet
1 participant
@fabriciomurta
Contributor

fabriciomurta commented Aug 10, 2018

Found: 4.7.0
Ext.NET forum thread: Grid Panel column Menu Scroll problem

When a menu is tall enough not to fit the viewport height, navigation arrows are placed there, so that it becomes scrollable, revealing hidden menu entries above and below.

On Ext.NET 4, by a mismatch between getY() and getStyle('top') from the menu frame, the menu ends up shifted by a few pixels down, enough to hide the lower scroller button.

To reproduce the issue, use the test case below, based on the ArrayGrid example.

  • Set the window height to something small (less than 500 pixels or so.
  • Click any columns' dropdown menu
  • Go to the columns hiding menu option.
  • The displayed menu shows shifted down by 17 pixels (on Triton theme).

There's a fix in the example itself (that's more a palliative than a definitive one), that just repositions the menu back when it detects it had been constrained to the viewable height. Just click the button in the grid topbar and re-expand the menus.

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.Data;
        }
    }

    private object[] Data
    {
        get
        {
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Simple Array Grid - Ext.NET Examples</title>

    <style>
        .x-grid-row-over .x-grid-cell-inner {
            font-weight : bold;
        }
    </style>

    <script>
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var fixIssue = function () {
            Ext.define('gh1607', {
                override: 'Ext.menu.Menu',
                afterShow: function() {
                    var me = this,
                        retVal = me.callParent(arguments);
                    if (me.getHeight() == Ext.getBody().getHeight() && me.el.getStyle('top') != "0px") {
                        me.el.setStyle('top', 0);
                        me.el.shadow.realign();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <h1>Simple Array Grid</h1>

    <ext:GridPanel
        ID="GridPanel1"
        runat="server"
        Title="Array Grid"
        Width="700"
        Height="350">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Fix issue with menu" Handler="fixIssue(); this.disable();" />
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="company" />
                            <ext:ModelField Name="price" Type="Float" />
                            <ext:ModelField Name="change" Type="Float" />
                            <ext:ModelField Name="pctChange" Type="Float" />
                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel>
            <Columns>
                <ext:Column runat="server" Text="Company" DataIndex="company" Width="200" />
                <ext:Column runat="server" Text="Price" DataIndex="price" Width="80">
                    <Renderer Format="UsMoney" />
                </ext:Column>
                <ext:Column runat="server" Text="Change" DataIndex="change" Width="80">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column runat="server" Text="Change" DataIndex="pctChange" Width="80">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" Width="120" />
                <ext:Column runat="server" Text="Fill1" Width="100" />
                <ext:Column runat="server" Text="Fill2" Width="100" />
                <ext:Column runat="server" Text="Fill3" Width="100" />
                <ext:Column runat="server" Text="Fill4" Width="100" />
                <ext:Column runat="server" Text="Fill5" Width="100" />
                <ext:Column runat="server" Text="Fill6" Width="100" />
                <ext:Column runat="server" Text="Fill7" Width="100" />
                <ext:Column runat="server" Text="Fill8" Width="100" />
                <ext:Column runat="server" Text="Fill9" Width="100" />
                <ext:Column runat="server" Text="Fill10" Width="100" />
                <ext:Column runat="server" Text="Fill11" Width="100" />
                <ext:Column runat="server" Text="Fill12" Width="100" />
                <ext:Column runat="server" Text="Fill13" Width="100" />
                <ext:Column runat="server" Text="Fill14" Width="100" />
                <ext:Column runat="server" Text="Fill15" Width="100" />
                <ext:Column runat="server" Text="Fill16" Width="100" />
                <ext:Column runat="server" Text="Fill17" Width="100" />
                <ext:Column runat="server" Text="Fill18" Width="100" />
                <ext:Column runat="server" Text="Fill19" Width="100" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" />
        </SelectionModel>
        <BottomBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Print" Icon="Printer" Handler="this.up('grid').print();" />
                </Items>
            </ext:Toolbar>
        </BottomBar>
    </ext:GridPanel>
</body>
</html>
@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Aug 13, 2018

Contributor

Fixed by applying the override above to Ext.NET. Should keep an eye open on Sencha fixing this on their own -- yet, if that's reproducible in their end. Should confirm with fiddle test case.

Contributor

fabriciomurta commented Aug 13, 2018

Fixed by applying the override above to Ext.NET. Should keep an eye open on Sencha fixing this on their own -- yet, if that's reproducible in their end. Should confirm with fiddle test case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment