Table is "jumpy" (and does not look nice)

General
1

In my current project, I have plenty of Tables. They are all perfectly functional.
However, there are two problems with them that I could not yet overcome:

  1. When a row gets selected (in fact, when it gets focus) the components inside cells “jump” a couple of pixels up. When the row is selected/deselected in place, there is no such jump. This does not happen if I use Reindeer, however, if I use my custom theme (which is just Reindeer with a few colors modified) the “jumping” is there. I tried to track the problem down with Firebug, but so far it has defied me.

  2. If the list of items is short, the table just shows blank space from the last row to the bottom. Instead, I would like to see stripes (just like in iTunes tables). I am unsure how I would do that.

Can anyone help me with that?

PS just wanted to mention that my Tables also jump in “stock” chameleon theme, so it is probably not my custom theme that is to blame. I have custom widgets in some generated cells, but these same widgets behave properly in other parts of the project.

2

Hi Valentin,

  1. Your description fits precisely an issue I’ve been wrestling with not so long ago. Switching focus-border decoration off via CSS did the job for me.
.v-table-focus .v-table-cell-content {
	border-top: 0 none;
	border-bottom: 0 none;
}
  1. +1 Would like to achieve the same as the default unused-space filler is not quite eye candy. Haven’t spent any time figuring this one out yet as it’s rather low priority on my list, but would definately welcome some improvement in this area at some point.

Tomas

3

Thanks for the tip!

Unfortunately, this dis not help - the table is still jumpy.
Here are the styles that I am using:

.v-table-cell-content,
.v-table-cell-content :focus {
	padding-top: 0;
    outline: none;
	border-right-color: #d3d4d5;
	vertical-align: top;
    border-top: 0 none;
    border-bottom: 0 none;
}
.v-table .v-selected,
.black .v-table .v-selected {
	background: #6eafe9;
	color: #fff;
    text-shadow: none;
}
.v-table .v-selected .v-table-cell-content {
	border-right-color: #6c99c4;
    border-top: 0 none;
    border-bottom: 0 none;
}

As you can see, I also set outline to 0.
If I set a fixed row height, it is the content inside that jumps; for undefined row height, the just-deselected row seems to expand.

This does not happen with Reindeer, but unfortunately I cannot use such dark background for selected rows as my custom widgets become almost invisible :frowning:
I have attached my entire table.css .
As you can see, it is pretty much stock Reindeer, except for the lighter selection color. My theme inherits from Reindeer.
11815.css (8.18 KB)

4

Hi again,

oh, well that’s bad luck then and you’d have to spend some time with firebug then…

As for the 2nd table optics issue. For reference I have made a simple workaround to get quite acceptable zebra-fashioned looks instead of solid background. This solution assumes fixed, uniform table row heights to look nice.


CSS:

.v-table-body, .white .v-table-body {
	background-image: url("backgrounds/table_zebra_20.png");
	background-repeat: repeat;
}


This is how it looks:

Cheers,
Tomas