Strange view in the tab

I have very strange view in the tab. Window is cut and looks like would be continuing in a different window. There is not an ability to scroll, so I can’t reach the bottom of page.

Why does this happen?

most likely you have a layout with undefined size that is bigger than the browser, and not inside a Panel or Window with set sizes. If you need something to scroll, you need to put it inside a Panel (and define a size for the panel).

I have a VerticalLayout where tables were added. This Layout was added to TabSheet and the TabSheet was added to the mainLayout which was VerticalLayout. I tried to select sizes for all mentioned components and setHeight() doesn’t work (setWidth() works well). The height just depends on the amount of tables in VerticalLayout.

One strange thing. I had this problem some time ago (I don’t remember the exact version of release) but after update to new releases it worked well. It was scrollable layout. But when I updated my Vaadin to the newest 6.8.5 version, I got the same problem I had already had.

Any suggestions?

You can use something like Firebug to go through the DOM structure; there you should be able to see what layout is misbehaving. Without seeing your code, that’s the best I can do :slight_smile:

My code is simple:


tabs = new TabSheet();
tabs.setSizeFull();
layout = new VerticalLayout();
layout.setSizeUndefined();
tabs.addTab(layout, "My Tab");

I found, that it was similar to: https://vaadin.com/forum/-/message_boards/view_message/1345148

It worked well till the update to the version of 6.8.5. But now when I downloaded previous versions and tried to replace the newest one to an older, they didn’t. I don’t understand what has changed, cause I haven’t changed my own code.

Going on that piece of code, it is no wonder the layout expands beyond the tabsheet. As i said in my first post, if you want scrolling, you need a Panel. Like this:

tabs = new TabSheet();
tabs.setSizeFull();
layout = new VerticalLayout();
layout.setSizeUndefined();
Panel p = new Panel(layout);
p.setSizeFull();
tabs.addTab(p, "My Tab");

I wrote the code what you had added and it didn’t work. As I said it was strange, because it worked till the update. Have no ideas that to do… 8o

There is always a possibility that it is a Vaadin core or CSS bug. CSS first; clear all browser caches, or better yet, disable caching and try again. If that didn’t work, then try to create a minimal test application where the problem is visible. Post the code here.

I created a new test application. Vaadin version was 6.7.4 by default. It worked well. There were scrollbars and all the view was good. When I updated to Vaadin version 6.8.5 I got the view I had in other project (see the first post). There weren’t scrollbars.

My code is:


package com.example.temp;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class TempApplication extends Application {
	
	public TabSheet tabs;
	public Layout layout;
	public Button add;
	public Window mainWindow;
        public Window myWindow;
	
	public void add (Button.ClickEvent event) {

		myWindow = new Window("New window");
		mainWindow.addWindow(myWindow);
		
		tabs = new TabSheet();
		tabs.setSizeFull();		

		Table table = new Table("This is my Table");
		table.addContainerProperty("First Name", String.class,  null);
		table.addContainerProperty("Last Name",  String.class,  null);
		table.addContainerProperty("Year",       Integer.class, null);
		table.addItem(new Object[] {
		    "Nicolaus","Copernicus",new Integer(1473)}, new Integer(1));
		table.addItem(new Object[] {
		    "Tycho",   "Brahe",     new Integer(1546)}, new Integer(2));
		//the same lines
		table.addItem(new Object[] {
			"Isaac",   "Newton",    new Integer(1643)}, new Integer(55));	
		table.setPageLength(55);
		
		layout = new VerticalLayout();
		layout.setSizeUndefined();
		layout.addComponent(table);
		Panel p = new Panel(layout);
		p.setSizeUndefined();
		tabs.addTab(p, "My Tab");
		
		myWindow.addComponent(tabs);
	}
	
	@Override
	public void init() {
		mainWindow = new Window("Temp Application");
		
		add = new Button();
		add.setCaption("Click");
		add.setImmediate(true);
		add.setWidth("-1px");
		add.setHeight("-1px");
		add.addListener(Button.ClickEvent.class, this,"add");
		mainWindow.addComponent(add);
		setMainWindow(mainWindow);
	}

}

Don’t know what to tell you; both 6.8.4 and 6.8.5 look identical to me. There is a problem in the code, though: You set a 100% height for the tabsheet, but the containing layout (verticalLayout inside the window) and the window itself have undefined height. This will usually never work, and as such is classified as an error when using the layout analyzer.

(add ?debug to your URL and press the ‘AL’ button for the analyze. You might want to clear the view first with ‘C’)

The same issue is present in the width as well; this is not classified ad as error, but might not be what you want.