Skip to content
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.

Sign up for GitHub

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

Jump to bottom

FF+IE11: Can't scroll to view add't columns when a grouped column is frozen. #331

Closed
ppeyro opened this issue Jan 12, 2018 · 11 comments
Closed

FF+IE11: Can't scroll to view add't columns when a grouped column is frozen. #331

ppeyro opened this issue Jan 12, 2018 · 11 comments
Assignees
@limonte
Labels
Priority 1 Q4 2017 waiting for an external dependency
Milestone
v1.2.1

Comments

@ppeyro
Copy link

ppeyro commented Jan 12, 2018

Description

If a grouped column is frozen, expanding the group and trying to scroll to view columns in the row doesn't work. Looks like there is no way to view the rest of the columns outside of the viewport.

Scrolling works on Chrome and Safari10.

Version

data-grid tag: 1.0.3
Browsers: FF57, IE11

Screenshot:

screen shot 2018-01-12 at 3 45 32 pm
@alump
Copy link
Contributor

alump commented Jan 13, 2018 •
edited
Loading

Was width of grid defined on your test case? @ppeyro

@Aileen-H
Copy link

1/16/18: May be polyfill issue

@alump
Copy link
Contributor

alump commented Jan 29, 2018

@ppeyro - please check if this still happens, if it does, please provide test app, or ways to reproduce with demo apps.

@Aileen-H
Copy link

PRIORITY 1

@alump alump self-assigned this Feb 1, 2018
@ppeyro
Copy link
Author

ppeyro commented Feb 1, 2018 •
edited
Loading

This is still happening with V1.1.7.
Code snippet below:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DataGrid: Edit Tests WITH TIMEOUT to fix paginated</title>

    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../polymer/polymer.html" />
    <link rel="import" href="../px-theme/px-theme-styles.html">
    <link rel="import" href="px-data-grid.html" />
    <link rel="import" href="px-data-grid-paginated.html" />

    <style is="custom-style">
      html, body {
        margin: 20px;
        font-size: 15px;
      }
    </style>

    <custom-style>
      <style include="px-theme-styles" is="custom-style"></style>
    </custom-style>

  </head>

<body>
  <dom-bind >
  <template is="dom-bind" id="table" >



    <div style="height:850px; width:950px">
      <px-data-grid
            table-data='[{
              "first": "Elizabeth",
              "last": "Wong",
              "email": "[email protected]",
              "age": "20",
              "height": "20",
              "weight": "20"
          }, {
              "first": "Jeffrey",
              "last": "Wong",
              "email": "[email protected]",
              "age": "20",
              "height": "20",
              "weight": "20"
          }, {
              "first": "Alma",
              "last": "Martin",
              "email": "[email protected]",
              "age": "20",
              "height": "20",
              "weight": "20"
          }, {
              "first": "Elizabeth",
              "last": "Saunders",
              "email": "[email protected]",
              "age": "23",
              "height": "23",
              "weight": "23"
          },
          {
              "first": "Elizabeth",
              "last": "Saunders",
              "email": "[email protected]",
              "age": "23",
              "height": "23",
              "weight": "23"
          },{
              "first": "Willie",
              "last": "Dennis",
              "email": "[email protected]",
              "age": "20",
              "height": "20",
              "weight": "20"
          }, {
              "first": "Elizabeth",
              "last": "Saunders",
              "email": "[email protected]",
              "age": "23",
              "height": "23",
              "weight": "23"
          },{
              "first": "Elizabeth",
              "last": "Saunders",
              "email": "[email protected]",
              "age": "24",
              "height": "24",
              "weight": "24"
          },{
              "first": "Elizabeth",
              "last": "Saunders",
              "email": "[email protected]",
              "age": "26",
              "height": "26",
              "weight": "26"
          }]'
          selection-mode="multi"
          default-column-width="150px"
          editable
          language="en"
          action-menu
          auto-height
          column-reordering-allowed
          >

        </px-data-grid>
    </div>
  </template>
</dom-bind>


</body>
</html>

@alump alump assigned limonte and unassigned alump Feb 1, 2018
@alump
Copy link
Contributor

alump commented Feb 1, 2018

@limonte - you can use the html above if you move it to px-data-grid folder, and then access it when gulp/polymer serving the project.

@ppeyro
Copy link
Author

ppeyro commented Feb 1, 2018

Worth noting, this may not necessarily be group by related.
Was able to reproduce it in FF 58 by just freezing a column.
After freezing the column, both vertical and horizontal scollbars seem to detach from the grid, i.e. you can move the scrollbar up and down(left/right) by itself but the grid doesn't move with it. When this happens, you can still move in the grid with up/down/right/left keys.

Screenshot

screen shot 2018-01-31 at 4 50 18 pm

@ppeyro
Copy link
Author

ppeyro commented Feb 6, 2018

An update, this still exists in both V1.1.10 and master, although noticing in these versions, the scrolling "somewhat" works, but it is super slow/delayed and the redraw on scroll leaves the grid content scrambled.

screen shot 2018-02-06 at 1 17 50 pm

@limonte
Copy link
Contributor

limonte commented Feb 8, 2018 •
edited
Loading

Today I was in the dependencies rabbit hole and that was a challenge to get out of it.

This is the issue of iron-overlay-behavior which is the dependency of iron-dropdown which is the dependency of px-dropdown which is the dependency of px-data-grid-header-cell which is the dependency of px-data-grid.

It's weird that such issues are possible in fundamental Polymer behaviors, but here's the fix: PolymerElements/iron-overlay-behavior#263

@limonte limonte mentioned this issue Feb 8, 2018
Merged
@valdrinkoshi valdrinkoshi mentioned this issue Feb 9, 2018
Closed
@limonte
Copy link
Contributor

limonte commented Feb 10, 2018

The fix for iron-overlay-behavior has been merged, let's wait for the release of iron-overlay-behavior and this issue can be closed.

@limonte
Copy link
Contributor

limonte commented Feb 10, 2018

The fixed version of iron-overlay-behavior has been released: https://github.com/PolymerElements/iron-overlay-behavior/releases/tag/v2.3.2

Update Bower deps, this issue should be fixed.

@limonte limonte closed this as completed Feb 10, 2018
@alump alump added this to the v1.2.1 milestone Feb 10, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@limonte limonte

Labels
Priority 1 Q4 2017 waiting for an external dependency
Projects
None yet
Milestone
v1.2.1
Development

No branches or pull requests
4 participants
@alump @limonte @ppeyro @Aileen-H