[grid] Cell content overflow shows ellipsis

[probert94]

Description

Since Vaadin 13, the cells in the Grid show an ellipsis, even if the content is, for example, a Checkbox. I had this issue in Vaadin 12 too, but it has gone with one of it's versions and I can't reproduce it with Vaadin 12 anymore.

Expected outcome

Actual outcome

Note the ellipsis in the CheckBox

Steps to reproduce

1. Download the Project Base For Vaadin Flow
2. Add the following code to MainView.java:

public class MainView extends VerticalLayout {
    public MainView() {
        Grid<Model> grid = new Grid<>();
        grid.addColumn(obj -> obj.id).setHeader("ID").setFlexGrow(0);
        grid.addColumn(obj -> obj.name).setHeader("Name").setFlexGrow(0);
        grid.addColumn(new ComponentRenderer<>(obj -> new Checkbox(obj.checked)))
            .setHeader("Checked")
            .setWidth("25px")
            .setFlexGrow(0)
            .setResizable(true);
        grid.setItems(
            new Model(1, "Model 1", false)
        );
        add(grid);
    }
    public class Model {
        public final long id;
        public final String name;
        public final boolean checked;
        public Model(long id, String name, boolean checked) {
            super();
            this.id = id;
            this.name = name;
            this.checked = checked;
        }

    }
}

3. Open the page in a web browser.

Browsers Affected

From the tested browsers, only Chromium browsers (Chrome and Opera) seem to be affected. Firefox and Edge don't display the ellipsis.

[web-padawan]

Duplicate of vaadin/vaadin-grid#1523.

In short, setWidth('25px') is causing this to happen. See how this been addressed at vaadin/vaadin-grid-flow#520

[probert94]

I know about that issue but it's solution won't work for resizable columns, since they can be resized to those 25px or even less. In my opinion the ellipsis should only apply, if the cell-content is pure text. If you add a custom component, you as developer are reaponsible for adding ellipsis if needed. Also, it seems like it only affects Chromium browsers, Firefox and Edge don't show the ellipsis.

[probert94]

I solved this by overwriting the text-overflow: ellipsis using this code:

<dom-module id="custom-grid" theme-for="vaadin-grid">
    <template>
        <style>
            [part~="cell"] ::slotted(vaadin-grid-cell-content) {
                text-overflow: unset;
            }
        </style>
    </template>
</dom-module>

The Components that should display the ellipsis can simply set the needed styles like this:

Span text = new Span("");
text.getStyle()
    .set("display", "block")
    .set("overflow", "hidden")
    .set("text-overflow", "ellipsis");

[mvysny]

Another workaround: only disable ellipsis on certain columns - place this into vaadin-grid.css then load it via @CssImport(themeFor="vaadin-grid"):

.text-overflow-clip[part~="cell"] ::slotted(vaadin-grid-cell-content) {
  text-overflow: clip !important;
}

then

grid.addComponentColumn(this::createToggle).setWidth("30px").setClassNameGenerator(it -> "text-overflow-clip").setFlexGrow(0);

[mikyjordan]

.text-overflow-clip

great..Work for me after 2day to know vaadin