Table rows height

Hello!
Is it possible to define a row height on a table??
Julie

Hi,

The height of table rows can be defined using CSS. For example, the following CSS defines 50px height for table rows:


.v-table-row, .v-table-row-odd {
	height: 50px;
}

-Henri

Thanks!
Is there a minimum height of row because I can’t reduce the default size??

Hi,

Because of the lazy-loading-scrolling nature of the default Table widget, we must calculate some value for the row height, so the scroll position can be calculated accurately. That basically implies that all rows should be equally high. It’s not required, but be aware that some oddities might present themselves if your rows have variable heights.

There is no default height specified in the themes that come with Vaadin. If you specify it yourself with CSS, like Henri suggested, all rows will be the same height. You could use the min-height CSS property instead of height, which will do exactly what it implies. It does not work in IE6, unfortunately.

Can you describe your problem/issue a bit more, so I could maybe suggest a better solution?

Thanks for your explanation.
Actually, I just want to view more row in my table. I want all rows to have the same height, I use it :

.v-table-listeot .v-table-row, .v-table-row-odd {
    min-height: 5px;
    font-size: 10px;
}

But it doesn’t work. I can’t see at most 15 rows but I want to see 30 rows.

Okay, I see. I think the problem is in your CSS selector. I assume you have specified the stylename “listeot” for your table.

In order for the CSS selector to work properly for both even and odd rows you need to add the “.v-table-listeot” class selector in front of the “.v-table-row-odd” as well (after the comma):

.v-table-listeot .v-table-row, 
.v-table-listeot .v-table-row-odd {
    min-height: 5px;
    font-size: 10px;
}

I do this but it doesn’t work! I don’t understand why! Please help me…

Can you post a screenshot?

Do you have any content inside the table (i.e. set on the server-side), or are all of the rows empty?

Can you post your entire custom theme CSS as well, there might be something we’re missing from the equation.

Have you tried using Firebug to uncover the problem?

I have content inside my table. In fact for each row, I have a color according to the column “ETAT INTERNE”.

My css file :

.v-table-listeot .v-table-row,
.v-table-listeot .v-table-row-odd {
    max-height: 5px;
    font-size: 10px;
}
.v-table-listeot .v-table-row-fils,
.v-table-listeot .v-table-row-odd-fils {
    min-height: 0mm;
    height: 0mm;
    max-height: 0mm;
    font-size: 10px;
}

/* Couleurs liste des OT */
.v-table-listeot .v-table-row-groupe {
	background-color: black;
	color: white;
}
.v-table-listeot .v-table-row-pretraite {
	background-color: white;
	color: black;
}
.v-table-listeot .v-table-row-nonconforme {
	background-color: red;
	color: white;
}
.v-table-listeot .v-table-row-nonaffecte {
	background-color: yellow;
	color: black;
}
.v-table-listeot .v-table-row-affectationencours {
	background-color: pink;
	color: black;
}
.v-table-listeot .v-table-row-affecte {
	background-color: RGB(51,204,255);
	color: black;
}
.v-table-listeot .v-table-row-transmis {
	background-color: RGB(51,51,153);
	color: black;
}
.v-table-listeot .v-table-row-accepte {
	background-color: RGB(51,51,255);
	color: black;
}
.v-table-listeot .v-table-row-encours {
	background-color: RGB(0,255,51);
	color: black;
}
.v-table-listeot .v-table-row-effectue {
	background-color: RGB(0,153,51);
	color: black;
}
.v-table-listeot .v-table-row-aterminer {
	background-color: red;
	color: black;
}
.v-table-listeot .v-table-row-prefinalise {
	background-color: orange;
	color: black;
}
.v-table-listeot .v-table-row-validation {
	background-color: gray;
	color: black;
}
.v-table-listeot .v-table-row-finalise {
	background-color: white;
	color: gray;
}
.v-table-listeot .v-table-row-stoppe {
	background-color: white;
	color: red;
}
.v-table-listeot .v-table-row-facture {
	background-color: white;
	color: RGB(102,0,102);
}
.v-table-listeot .v-table-row-paye {
	background-color: white;
	color: RGB(0,153,51);
}

Hmm, I may have understood wrong what you are trying to accomplish.

So you want to have more rows visible at the same time, in the screenshot you have 15 visible, but you want to have 30, is that so?

But you would like the rows to be smaller than the contained content, in effect clipping the texts, I am right?

In that case, you’ll have to use the following css:

.v-table-listeot .v-table-cell-wrapper {
    max-height: 5px;
}

You could also increase the height of the actual table component. I suppose you know about the method Table.setPageLength(), right?

And you could also remove the extra paddings that are applied on the table cells.

.v-table-listeot .v-table-cell-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}