Vaadin table / scrollbars disappears

Hi together,

I have got an issue with vaadin 7 / table component where scrollbars (horizontal & vertical) disappears for a short moment (some millisconds) after scrolling.

This issue is very annoying because if I want to search for someting in the bottom of the table I have to wait a moment until scrollbars comes back.

My table is inside two vertical-layouts. Table and layouts are set to 100% witdh and heigth to fill the whole browser window and make controls and table header steady. (see screenshots)

If i set setPageLength to the amount of table rows, scrollbars will not disappears until scrolling, but lazy loading is now disabled which causes performance problems if my table have a lot of rows.

Does anyone know why tables scrollbars disappear for a short term after scrolling?

Best regards
Steffen
12873.jpg

Hi,

I can’t reproduce this with Vaadin 7.0.3, so I’d ask a few additional questions. Which browser are you using? What is the exact Vaadin version you’re using? Would it be possible for you to post a minimal testcase which reproduces the issue?

-tepi

Hi Tepi,

I am using Vaadin 7.0.1 and Firefox 18. I try to build a testcase later this evening…

Best regards
Steffen

Ok, please do :slight_smile: I tested this with a Table containing 10 000 rows and having both horizontal and vertical scroll bars, using Vaadin 7.0.3 and Firefox 19 - and as said could not reproduce the issue.

Hi Teppo,

now I had build a test-case to reproduce this issue. (also reproducable in 7.0.3) Building the test case I was also able to find out where the problem is coming from:

I’am using table.addGeneratedColumn method to change some colums in HTML-Links. If it is disabled, problem does not occur.

Do you know a better way to format columns in HTML-Links, because I see that there is also a poor performance with usage of addGeneratedColumn?

Here is the example:



package com.example.test;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;



public class TestUI extends UI {
	@Override
	public void init(VaadinRequest request) {

		VerticalLayout outer = new VerticalLayout();
				
		VerticalLayout innern = new VerticalLayout();
        Label plainText = new Label("This is an header example of a Label");
        
        MyTableView table = new MyTableView();
        innern.setHeight("100%");
        innern.setWidth("100%");
        
        outer.addComponent(plainText);
        outer.addComponent(innern);
        
		outer.setExpandRatio(plainText, 0.05f);
		outer.setExpandRatio(innern,  0.95f);
		outer.setHeight("100%");
        
		outer.setSpacing(true);
        
        innern.addComponent(table);

        
		setContent(outer);
	}

}


package com.example.test;

import com.vaadin.data.Item;
import com.vaadin.server.ExternalResource;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.Link;
import com.vaadin.ui.Table;
import com.vaadin.ui.VerticalLayout;

public class MyTableView extends VerticalLayout{
	
	Table table = new Table();
	
	public MyTableView()
	{

		setMargin(true);
		setSpacing(true);
		
		table.setSelectable(true);
		table.setMultiSelect(false);
		table.setImmediate(true);
		
		Object[] testStrings = {"http://www.google.de", "http://www.ebay.de", "http://www.amazon.de", "http://www.otto.de", "ccccccccccccccccccccccccccccccccccccc", "3333333333333333333333333333333333333333333333" , "ddddddddddddddddddddddddddddddddddddddddddd"};
		
		table.addContainerProperty("chars1", String.class,  null);
		table.addContainerProperty("chars2",  String.class,  null);
		table.addContainerProperty("chars3", String.class,  null);
		table.addContainerProperty("chars4",  String.class,  null);
		table.addContainerProperty("numbers5",  String.class,  null);
		table.addContainerProperty("numbers6",  String.class,  null);
		table.addContainerProperty("numbers7",  String.class,  null);
		
		for (int i = 0; i < 1000; i++) {
			
			table.addItem(testStrings, new Integer(i));
		}
		
		table.setHeight("100%");
		table.setWidth("100%");
		
		table.setSortEnabled(false);
		
		this.setHeight("100%");
		this.setWidth("100%");
		
		VerticalLayout footer = new VerticalLayout();
		Label plainText = new Label("This is an second example of a Label");
		footer.addComponent(plainText);
		
		this.addComponent(table);
		this.addComponent(footer);

		this.setExpandRatio(table, 0.95f);
		this.setExpandRatio(footer, 0.05f);
		
		table.addGeneratedColumn("chars1", new Table.ColumnGenerator()
		{
			private static final long serialVersionUID = 2267507668811253526L;

			public Component generateCell(Table source, Object itemId, Object columnId)
			{
				return cellHelper(itemId, "chars1");
			}

		});
		
	}
	
	private Link cellHelper(Object itemId, String propertyName)
	{
		Item item = table.getItem(itemId);
		String url = (String) item.getItemProperty(propertyName).getValue();

		Link urlLink = null;

		if (url != null)
		{
			// the Link -component:
			urlLink = new Link(url, new ExternalResource(url));
			urlLink.setTargetName("_blank");
		}
		return urlLink;

	}

}

Ok, I can reproduce the issue now.

The scrollbar disappearance seems to happen after all the state changes and layouting has already been processed on the client side. It looks like the reason is the 300ms delayed run of lazyAdjustColumnWidths timer (in VScrollTable). To add to the confusion, the same timer is also in V6 table but does not cause the same issue there.

Also tried the same on Vaadin 6.8.9 and it works just fine - scroll bar is visible all the time, so this definitely looks like a bug in Vaadin 7’s Table. Please file a ticket about this in the
vaadin trac
and attach your test case. You might also want to mention that this seems to happen due to the delayed execution of lazyAdjustColumnWidths-

As for a workaround - unfortunately I can think of none. There’s no other way to put links or html content into the table, and even setting fixed widths to all the columns does not seem to fix the problem.

OK THX! So I need to wait for a
Bugfix