CSS for table

General
1

Hi i am facing a problem eith the table css .
Whenever i select a table row in the table, the textfield’s and datefield’s, that is columns in the table, becomes white and the text in that is not visible and when i deselect it, it looks normal with text in it.
Can anybody help me with this as it is a serious problem.
Thanks
D

2

This is the css that is applied in the table UI

.v-table .v-selected {
text-shadow: 0 .1em .1em rgba(0,0,0,.3);

    background: #6ba7e4;
    background: -moz-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75b0e7), color-stop(100%,#5f9de1));
    background: -webkit-linear-gradient(top, #75b0e7 0%,#5f9de1 100%);
    background: -o-linear-gradient(top, #75b0e7 0%,#5f9de1 100%);
    background: -ms-linear-gradient(top, #75b0e7 0%,#5f9de1 100%);
/* background: linear-gradient(to bottom, #75b0e7 0%,#5f9de1 100%); */
}

.v-table .v-selected + .v-selected {
    background: #5f9de1;
}

.v-table .v-selected .v-table-cell-content {
    border-left-color: transparent;
}
3

Hi guys PLease help ASAP
Thanks alot

4

I don’t see a problem in the CSS you provided. Anyway, it seems that you either have a custom CSS for selected components or you are missing one. You could use the developer tools of your browser to check what styles the the textfield in the selected row gets. Also it would be nice to see a screenshot about your problem to get full understanding of the problem.

5

I have got the problem but i dont know how to resolve it.
The problem is in css, in the table the text is in black color with white background. As i select the row of the table, the background of that row becomes blue as mentioned in css:

".v-table .v-selected {
text-shadow: 0 .1em .1em rgba(0,0,0,.3);

    background: #6ba7e4;
    background: -moz-linear-gradient(top, #75b0e7 0%, #5f9de1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75b0e7), color-stop(100%,#5f9de1));
    background: -webkit-linear-gradient(top, #75b0e7 0%,#5f9de1 100%);
    background: -o-linear-gradient(top, #75b0e7 0%,#5f9de1 100%);
    background: -ms-linear-gradient(top, #75b0e7 0%,#5f9de1 100%);
/* background: linear-gradient(to bottom, #75b0e7 0%,#5f9de1 100%); */
}

.v-table .v-selected + .v-selected {
    background: #5f9de1;
}"

and the text becomes white but the textfield remains white which causes the text in the textfield transparent.

16910.png
16911.png

6

The field in selected row has ‘color’ as white. Is it Vaadin TextField component? I think it should have dark color by default. Anyway that could be changed like this (assuming it’s textfield)

.v-table .v-selected .v-textfield {
color: black;
}