New Vaadin IE11 hover problem in grid?

Flow
1

Hi there.
I can’t remember if the hover worked previously, but I’ve received a bug that it isn’t now so I guess it was.
The hover on grid rows works correctly in Chrome, but it doesn’t in IE11. But only in grid, on other elements hover works as it should.

I’ve tried a lot of selectors, nothing works in the IE.

table tr:hover td,
table tr:hover:before td,
table tr:hover:after td,
.v-ie .v-grid-row:hover td,
.v-ie tr:hover td {
color: rgb(25, 125, 225);
cursor: pointer;
background-color: rgba(0, 0, 0, 0.1);
}

Can anybody help please?

The grid component after update to 7.5+ has a lot of problems.

2

Hey Martin,

I’ll take a look at the hover style issue in IE11.

What other problems have you encountered after updating?

3

It’s already dealt with, but thank you. The problem was with insufficient selectors, which is kidna crazy because there was like 5 billion of them.

Other problem was with frozing columns. And I don’t recall the others, it’s guite some time ago for my little vermin memory ^^

4

Hi,
I am using a grid and I want to hover over column cells to view the complete data. How can I do this?

5

Hi tehre Hafiz. We couldn’t find a solution but we found some css hack on the internet. We added the text into context in css before pseudoclass and styled it so it looked like tooltip.

I’ve tried to find it now but couldn’t. Try look into it. If you wont suceed I’ll try to ask my colegues. I don’t have access to it anymore.

GL

6

Ok so can you give me an example as to how we will use this tooltip for all the cells in a column?

7

Is this what you were looking for Hafiz?

Grid grid = new Grid();
grid.addColumn("name", String.class);
grid.addColumn("born", Integer.class);
grid.addRow("Nicolaus Copernicus", 1543);
grid.addRow("Galileo Galilei", 1564);
grid.addRow("Johannes Kepler", 1571);

grid.setCellDescriptionGenerator(new CellDescriptionGenerator() {
  @Override
  public String getDescription(CellReference cell) {
    if (cell.getValue().equals("Nicolaus Copernicus")) {
      return "Lorem Ipsum";
    }
    return null;
  }
});