Vaadin-grid: Dropdown content menus are clipped to cell

Created on 3 Apr 2017 · 18Comments · Source: vaadin/vaadin-grid

When I try and put a paper-dropdown in a vaadin-grid-column to make that field editable, the dropdown content is clipped to the cell.
Is it possible to get the dropdown-content to display properly or is this a bug?

Gif showing the dropdown content being clipped:

Code:

<body>
  <template is="dom-bind" id="app">
    <vaadin-grid items="[[people]]">
      <vaadin-grid-column>
        <template class="header">Gender</template>
        <template>
          <paper-dropdown-menu label="Gender">
            <paper-listbox class="dropdown-content" attr-for-selected="gender" attr-for-item-title="gender" selected="{{item.gender}}">
              <template is="dom-repeat" items="[[genders]]" as="gender">
                <paper-item gender="[[gender]]">[[gender]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu>
        </template>
      </vaadin-grid-column>
    </vaadin-grid>
  </template>

  <script>
    var app = document.querySelector("#app");

    app.people = [
      {
        name: "John",
        gender: "Male"
      }, {
        name: "Amy",
        gender: "Female"
      }, {
        name: "Owen",
        gender: "Gender Diverse"
      }
    ];

    app.genders = [
      "Male",
      "Female",
      "Gender Diverse"
    ];
  </script>
</body>

Source

RebeccaStevens

Most helpful comment

We had a similar problem when we tried to show a custom "tooltip" in a grid, it got clipped or rather hidden by the rows underneath.
Simple solution for us was to add css for .v-grid-row :hover {z-index:1000;}

Not very scientific, but it might help someone :-)

/JC

clivemo on 9 Oct 2018

👍2

All 18 comments

Hi @RebeccaStevens!

Unfortunately, this is a known issue which affects all list-like components that use row translating (vaadin-grid, iron-list, iron-data-table) when they are used together with iron-dropdown based components.

I've seen some workarounds like this, where you manually set z-index for the items.

If you are able to use vaadin-combo-box instead of paper-dropdown-menu, that will also get you out of trouble.

On the bright side, we do have a plan and a working prototype on how to fix this clipping issue, which we'll probably continue working on right after the Polymer 2.0 support is out.

Saulis on 3 Apr 2017

One workaround might also be to place the dropdown/editor outside the grid. On open you can position the overlay over the clicked cell if that’s how it should appear.

tomivirkki on 3 Apr 2017

Thanks for the help :)

RebeccaStevens on 3 Apr 2017

Probably super hacky, but maybe it will help someone else who finds this. Basically, just override the vaadin-grid-table#_positionItems method provided by iron-list-behavior with the original implementation with the added z-index highest to lowest.

ready() {
  const el = this.$.groupList.$.scroller;
  el._positionItems = function() {
    this._adjustScrollPosition();
    var y = this._physicalTop;
    this._iterateItems(function(pidx, vidx) {
      this._physicalItems[pidx].style.transform = this._getTranslate(0, y);

      // Added to set `z-index` on `tr` and bypass stacking context issue
      this._physicalItems[pidx].style.zIndex = this._physicalItems.length - pidx;

      y += this._physicalSizes[pidx];
    });
  }.bind(el);
},

stramel on 6 Apr 2017

👍1

Any update on this?

guylhermetabosa on 10 Apr 2017

@guylhermetabosa not at the moment, there's going to be a 2.1 release before we can start working on a fix for this.

Saulis on 13 Apr 2017

The following fiddle demonstrates the issue in an isolated environment: https://jsfiddle.net/sf1may79/

As @Saulis mentioned, if the overlay (even a fixed one) is placed inside a layout that clips overflowing content, it will get cropped. There might be nothing we can do in the <vaadin-grid> itself to fix this paper-dropdown issue since we’ll need to use transforms (at least for the header/frozen/footer sections) anyway.

I also recommend trying <vaadin-combo-box> instead since it works around this by locating the overlay element right under the <body>.

tomivirkki on 13 Apr 2017

The same problem exists for vaadin-date-picker inside a vaadin-grid cell.
Has any fix been figured out yet ?

rajesh-sharma-0490 on 26 Jun 2017

👍1

The same problem exists for vaadin-date-picker inside a vaadin-grid cell.
Has any fix been figured out yet ?

Vaadin date picker recently adopted vaadin-overlay, so it avoids this issue now. All Vaadin elements that have an overlay actually avoid this issue, so you are free to use them inside the rows.

I suppose we could introduce a vaadin-tooltip (which extends vaadin-overlay) element since paper-tooltip suffers from this issue still.

@tomivirkki has a prototype hidden somewhere that replaces the current scroller implementation with a version that does not introduce this issue in the first place. I’m hoping we will see it eventually 😉

jouni on 8 Jan 2018

All Vaadin components with a dropdown/overlay now use <vaadin-overlay> internally so they should no longer clip. Closing.

tomivirkki on 15 May 2018

👎2

Not very scientific, but it might help someone :-)

/JC

clivemo on 9 Oct 2018

👍2

@clivemo There is no .v-grid-row class on anything in the vaadin-grid. What exactly did you style and if it's the vaadin-grid what is the version you were using ?

mihaisavezi on 29 Aug 2019

Vaadin 8

clivemo on 29 Aug 2019

Ok, so I guess your answer relates to the grid component in Vaadin for java, not the standalone web component

mihaisavezi on 29 Aug 2019

Yes it does, but my thought was that the general idea of changing z-index on row level might help someone.

clivemo on 29 Aug 2019

Tried something like changing the z-index for the tbody element. But this messes up scrolling visually. I guess the question is, is there a tooltip element that works inside vaadin-grid cells ?

mihaisavezi on 29 Aug 2019

Ok, so it's because the stacking context issues caused by how scrolling is done.

I see in the demo application, for something that's similar to a tooltip, a select-overlay, the element is created at the root level, and so there aren't any stacking context problems.

Reference demo app --> https://demo.vaadin.com/invoice-editor-app/. Just click on a cell

mihaisavezi on 29 Aug 2019

For anyone still struggling with the stacking context issues, and that needs a tooltip that works with vaadin-grid, you can use tippy.js

mihaisavezi on 30 Aug 2019

Was this page helpful?

0 / 5 - 0 ratings