dashed line around table selection

Flow
1

How can i remove the dashed line around the table’s selected row? I have tried following

.v-table .v-selected {
…
border: none;
outline: none;
}

does not seem to work.

Thanks

2

Hi,

I’ve had this one before, and it’s actually a little more complicated than it seems at first : the dashed line is not because the row is selected, but because it has the focus.

The style actually comes from this rule in the Reindeer theme:

.v-table-focus .v-table-cell-content {
    border-bottom-color: #0066BD;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-top-color: #0066BD;
    border-top-style: dotted;
    border-top-width: 1px;
}

To get rid of it, then, in your own theme :

.v-table-focus .v-table-cell-content {
    border:none;
}

If you are not using it, I very strongly recommend using the Firebug plugin in Firefox for looking at the styles of a Vaadin application - that’s how I found this rule. Even though my companies main target browser for applications is (unfortunately) IE8, and although I personally use Chrome as my main browser, I always comeback to using Firefox + Firebug when analyzing & tweaking CSS.

Hope That Helps,

Cheers,

Charles.

3

thank you very much for the answer and the tip aswell, it works like a charm !

4

I tried this as suggested:


.v-table-focus .v-table-cell-content {
    border:none;
}

But that changes the height of the selected row. This causes an annoying animation illusion of the rows moving as the user clicks one or another.

So I tried this, trying to make the border match the background. But instead I get a white background on a default Table in Vaadin 6.7.5. I’m using Eclipse Indigo’s built-in browser (WebKit?).


/* Kill the dotted line appearing around a row holding the focus by making it match the background [Fails - I get white border]
 */
.v-table-focus .v-table-cell-content {
  border-style: solid;
  border-color: inherit;
}

–Basil Bourque

5

Have your tried to cancel the loss of border with padding instead ?

.v-table-focus .v-table-cell-content {
    border:none;
    padding-top:1px;
    padding-bottom:1px;
}

(If the cell has already some padding you will have to add 1px to top and to bottom)