title: How to style a Vaadin Table row with multi-row drag mode enabled
body: <p><strong>Problem</strong></p>
  
  <p>Recently I came across a weird bug in a Vaadin application. When dragging a table row, the row would sometimes appear at a different position than the mouse cursor. I also noticed that the dragged row didn’t have the correct CSS style.</p>
  
  <p><a href="https://i.stack.imgur.com/91D8X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/91D8X.png" alt="The same thing in Vaadin Sampler with browser-tweaked styles"></a></p>
  
  <p>I replicated the behavior on the <a href="http://demo.vaadin.com/sampler/" rel="nofollow noreferrer">Vaadin Sampler</a> page by going to the <a href="http://demo.vaadin.com/sampler/#ui/grids-and-trees/table" rel="nofollow noreferrer">Table demo</a>, enabling MULTIROW drag mode and applying some custom CSS in Chrome to make it more visible.</p>
  
  <p>Here’s the CSS I used:</p>
  
  <pre><code>.v-table .v-table-row .v-table-cell-content {
     background-color: red;
     font-size: 3em;
  }
  </code></pre>
  
  <p>Strangely this would only happen when dragging the <strong>currently selected</strong> row and with the <strong>MULTIROW</strong> drag mode enabled.</p>
  
  <p>I wasn’t able to find out how the dragged row's code looks. Also, googling around for any information on styling dragged items produced no results.</p>
  
  <p>I did however find out, that <strong>the dragged row exists outside the scope of the table component</strong>, which means that CSS rules with table-specific selectors no longer apply.</p>
  
  <p><strong>Solution</strong></p>
  
  <ol>
  <li>Change drag mode to <em>ROW</em> (but I guess you have a reason to want MULTIROW)</li>
  <li>Change your CSS to less specific rules - i.e. ".our-awesome-class" instead of ".v-table .v-table-row .v-table-cell-content .our-awesome-class". While this may work fine, it will make your rules more general and could break your styles.</li>
  <li>I searched the Vaadin theme files and found the <em>v-drag-element</em> class. This class is present on the dragged row, but I didn't manage to make it work for the <strong>selected row</strong>.</li>
  </ol>
  
  <p><strong>Question</strong></p>
  
  <p>Does anyone know how to do this properly? </p>
  
  <p>It looks to me like a Vaadin bug (since it seems to work nicely without MULTIROW mode).</p>