Table row height "magically" increases

I’ve been working on a dynamical table in which rows are inserted and removed by the user.

My problem is that when a new row is added or removed, the columns where a Select or Button component are increase their height in 3px each time. Those, in CSS, would be the v-filterselect-input and v-button classes.

You can see the problem in the attached image.

Any clue how to solve this?

Thank you in advance,


Does the problem occur with lower components, such as a Label? Or a Button with the Reindeer.BUTTON_SMALL style?

This sounds a bit like it could be a bug. A simple code example where it occurs would help determining if it is.

Hi Marko, thank you for your reply.

No, the rest of the columns are Label components and they seem to work fine.

Same result when Reindeer.BUTTON_SMALL style is used.

The code in the composite I created is a bit long (i’m a newbie in Vaadin). Let’s see if these key lines help:

The table is declared as global variable.

public class ProductsInput extends CustomComponent {

	Table productList = new Table("Product List");


Creation of table layout

	private Component buildProductListLayout() {


		// Create headers
		productList.addContainerProperty("Code", Label.class, "", null, null,
		productList.addContainerProperty("Quantity", Select.class, "", null,
				null, Table.ALIGN_LEFT);
		productList.addContainerProperty("Description", Label.class, "", null,
				null, Table.ALIGN_LEFT);
		productList.addContainerProperty("Real Cost", Label.class, "", null,
				null, Table.ALIGN_RIGHT);
		productList.addContainerProperty("Diff Cost", Label.class, "", null,
				null, Table.ALIGN_RIGHT);
		productList.addContainerProperty("Saling Price", Label.class, "", null,
				null, Table.ALIGN_RIGHT);
		productList.addContainerProperty("Total Cost", Label.class, "", null,
				null, Table.ALIGN_RIGHT);
		productList.addContainerProperty("Issue", Label.class, "", null, null,
		productList.addContainerProperty("Action", Button.class, null, "",
				null, Table.ALIGN_CENTER);

		productList.setColumnExpandRatio("Code", 2);
		productList.setColumnExpandRatio("Quantity", 2);
		productList.setColumnExpandRatio("Description", 5);
		productList.setColumnExpandRatio("Real Cost", 2);
		productList.setColumnExpandRatio("Fixed Cost", 2);
		productList.setColumnExpandRatio("Saling Price", 2);
		productList.setColumnExpandRatio("Total Cost", 2);
		productList.setColumnExpandRatio("Issue", 3);
		productList.setColumnExpandRatio("Action", 1);

		// Fetch product list
		Product[] products = getDummyProducts(10);
		// Fill data
		for (int i = 0; i < products.length; i++) {


Method that adds products to the table.

		private void addToProductList(Product product) {
		Label code = new Label(product.getCode());
		Select quantity = new Select();
		for (int j = 0; j < 100; j++) {
			Object itemId = quantity.addItem();
			quantity.setItemCaption(itemId, (1+j)+"");


		Button removeButton = new Button("-");
		Object itemId = productList.addItem(new Object[] { code, quantity,
				description, realCost, fixedCost, salePrice, totalCost, issue,
				removeButton }, productList.getItemIds().size());

Well, I hope this helps to understand better the issue. Maybe it’s not a bug, just a programming error, but I haven’t been able to find a solution.

Thanks in advance.

By the way, in my previous reply, from line 41 in the second code quote onwards, text type has changed to italic for some strange reason. Has this occured before?

Yeah, it occurs almost always when you use variable i for iteration. :mellow: The [ i ]

[/ i ] (without spaces) is the notation for italics in this forum system and it works also in code blocks…

Ok I dind’t realize that the [ i ]
in prodcuts[ i ]
had gone. I will be more careful next time.

Did you see anything strange in the codification that might be the problem?

Hi Mannix,

I am also facing same problem as you stated. I have a dynamic table and user can insert rows by clicking add button. Wen i try to insert a record, the row height of the table also incremented by some pixels.

My addRow() method looks like below-

public void addRow(int noOfRow) {
    	int maxSize = tableLength+noOfRow;
    	for (int i = tableLength; i <= maxSize; i++) {"DataGenApplication - addRow(): Adding row- "+i);
            Select dataType = new Select();

            Select format = new Select();

            Label example = new Label("NA");

            TextField field = new TextField("");
            HorizontalLayout addBar = new HorizontalLayout();
            addBar.addComponent(new Label("NA"));
            listing.addItem(new Object[] {i, field, dataType, format, example, addBar}, i);
            tableLength = i;

You can check the live demo at

I tried so much and did not get any clue of the problem. If any one has the solution Kindly help me. I am really stocked.

Hi Friends,

Please anybody help me on this issue. I really stucked here.:bashful: