css - How to style a Vaadin Table row with multi-row drag mode enabled -

problem

recently came across weird bug in vaadin application. when dragging table row, row appear @ different position mouse cursor. noticed dragged row didn’t have correct css style.

i replicated behavior on vaadin sampler page going table demo, enabling multirow drag mode , applying custom css in chrome make more visible.

here’s css used:

.v-table .v-table-row .v-table-cell-content {    background-color: red;    font-size: 3em; } 

strangely happen when dragging currently selected row , multirow drag mode enabled.

i wasn’t able find out how dragged row's code looks. also, googling around information on styling dragged items produced no results.

i did find out, the dragged row exists outside scope of table component, means css rules table-specific selectors no longer apply.

solution

1. change drag mode row (but guess have reason want multirow)
2. change css less specific rules - i.e. ".our-awesome-class" instead of ".v-table .v-table-row .v-table-cell-content .our-awesome-class". while may work fine, make rules more general , break styles.
3. i searched vaadin theme files , found v-drag-element class. class present on dragged row, didn't manage make work selected row.

question

does know how properly?

it looks me vaadin bug (since seems work nicely without multirow mode).