<v-grid> text-overflow: ellipsis; doesn’t work for cell content

[Saulis]

Testing with tehapo/project-list-demo, sorting looks like this:

Chrome:

Firefox:

Safari:

I guess using ... would be OK way to go with all browsers.

[jouni]

It seems that combining display: inline-flex; and text-overflow: ellipsis; doesn’t work correctly in other browsers than Safari. Setting .v-grid-cell { display: inline-block; } adds the ellipsis also on Chrome and Firefox when the column is narrow enough.

[jouni]

Also, this affects all body cells as well, none of them have the ellipsis either when the cell content is wider than the cell.

It might be that we need to reconsider display: inline-flex on the cells…

[jouni]

Related issue in Chrome: https://code.google.com/p/chromium/issues/detail?id=327437
Related issue in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=912434

It seems this will not be fixed by the browsers. Safari just happens to do what we would like.

Options:

• Change .v-grid-cell back to display: inline-block; and handle vertical centering differently.
• Add an extra element inside the cells, which will allow us to move the text-overflow: ellipsis; to that element. This would also make custom renderers work more like expected, if we continue to use display: inline-flex; for the cells.

[jouni]

This affects body cells as well as header and footer cells.

[anezthes]

One possible solution would be to remove the inline height of the header cells, and only set that for the header row. We can also let the header row vertically align the cells.

// Allow for ellipsis.
.v-grid-cell.v-grid {
  display: inline-block;
}

// Move height and background to parent.
.v-grid-header.v-grid th.v-grid {
  background-color: transparent; // <--- can also be removed if we remove the white bg color from .v-grid-cell.v-grid.
  height: auto !important; // <--- can be removed if we remove inline height.
}

// Header rows.
.v-grid-header > .v-grid-row {
  align-items: center;
  background-color: #03A9F4;

  display: flex;

  height: 32px;
}

[jouni]

One idea I had was that we have default renderer implementations for all cells that wrap the texts in a <span> which has the text-overflow: ellipsis;.

If we have position: relative; overflow: hidden; on the cells, that means no-one can use a custom renderer which has some elements that need to be visible outside the grid cell (e.g. custom drop down menus). We might be able to avoid position: relative;, though. We need to try this out.