Grid (7.4.beta2) - how to disable highlighting of cells/rows?

Hello,
I’m experimenting with Vaadin’s new Grid component from 7.4.beta2 and I’m really amazed. However, I’m struggling with one thing: I want to render Buttons inside the Grid’s cells (which is easy) but if the user clicks between the buttons, the underlying Grid cell should not be highlighted! Currently a blue frame shows up around the cell and I can’t disable it. I tried using

.v-grid-cell-focused { position: initial !important; } which at first seemed to help but then I realized that the fixed first column was now not fixed anymore.

Can anybody tell me how to disable the highlighting of Grid cells and rows completely? That would be great!

Thanks in advance,
Mathis

Hi Mathis,

With SCSS you can set the variable
$v-grid-cell-focused-border
to
none
. You could also simply hide the focus outline pseudoelement:

.v-grid-cell-focused:before {
    display: none !important;
}

Thank you very much! It works like a charm.