Problem with Table width and height

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

I am not sure if this is a bug, or am doing something wrong somewhere.

using table in my app, when i try to set width to 100%, in Firefox 3 and google chrome and IE 6+, the table stretches like six times the widht of the screen, so you have to horizontally scroll like 1 meter.

what is wrong here.


	Window main;
	public CustomLayout masterPageLayout;
	public CustomLayout frontPageLayout;
	private  Panel eventsPanel = new Panel("Current and Upcoming Events");
	private  Table newEventsTable = new Table();	
	private MyEmailButton btEditor;
	private MyEmailButton btHeading;
	private Vector<NewEventBean> newEventVector1;
	public ApplicationContext ctx;
	public WebApplicationContext webCtx;	
	public HttpSession session;
	public String username;
	static Config conf = Config.getInstance();
	ExpandLayout layout = new ExpandLayout(OrderedLayout.ORIENTATION_VERTICAL);
	
	public PublicEventsPanel(CustomLayout frontPLayout,Window mainWindow)
	{
		
		main = mainWindow;
		frontPageLayout = frontPLayout;		
		ctx = main.getApplication().getContext();
		webCtx = (WebApplicationContext) ctx;
		session = webCtx.getHttpSession();
		username = (String)session.getAttribute("UserName"); 
		newEventsTable.setPageLength(conf.getValueInt("PUBLIC_EVENT_PANEL_NO_OF_EVENTS",15));
		newEventsTable.addContainerProperty("Date Posted", Label.class, "");
		newEventsTable.addContainerProperty("Heading", Button.class, "");	
		newEventsTable.addContainerProperty("Editor", Button.class, "");
		newEventsTable.setSelectable(true);
		newEventsTable.setImmediate(true);
//		newEventsTable.setStyleName("paging");
		
		Vector<NewEventBean> newEventVector = (Vector<NewEventBean>)EventControl.getPublicEvents();			
		if(newEventVector != null)
		{
			newEventVector1 = newEventVector;
			
			for (int i = 0 ; i < newEventVector.size() ; i++)
			{
				
				btHeading = new MyEmailButton(i);
				btEditor = new MyEmailButton(i);
				
				NewEventBean newEvent;
				newEvent = (NewEventBean)newEventVector.get(i);

				int comma = newEvent.getDate().lastIndexOf(".");							
				String newevent = newEvent.getDate().substring(0, comma);
				String heading = utils.Utilities.cutNetworknameIfLong(newEvent.getMessage(), 40);
				String editor = newEvent.getUsername();
							
				
				btHeading.setStyleName("link");	
				btHeading.setCaption(heading);
				btHeading.addListener(Button.ClickEvent.class, this, "newEventClick");
				
				
				btEditor.setStyleName("link");	
				btEditor.addListener(Button.ClickEvent.class, this, "memberProfileClick");
				btEditor.setCaption(editor);
				newEventsTable.setWidth("600px");
				newEventsTable.addItem(new Object[]{new Label(newevent),btHeading, btEditor}, Integer.valueOf(i));
			}
		}			
		layout.addComponent(newEventsTable);
		layout.expand(newEventsTable);
		newEventsTable.setHeight(100);
		newEventsTable.setHeightUnits(Table.UNITS_PERCENTAGE);
		newEventsTable.setWidth(100);
		newEventsTable.setWidthUnits(Table.UNITS_PERCENTAGE);
		eventsPanel.addComponent(layout);
//		eventsPanel.setStyleName("frontPageEventsPanel");
		setCompositionRoot(eventsPanel);
	}

Immediate help will be appreciated.

NOTE: and this is the case even when i do not use expand layout, just a table and try to set width to 100% or setSizeFull()

2

Hello,

I noticed that you first set the width to “600px” and after that to 100 percent.
Could the first setting of “600px” cause the unwanted 600% width?

3

Sorry for that, it is the setting am using now, I just forgot to remove on the above code. so should be treated as it doesn’t exist.

4

Hi,

You’re using trunk, right? We’re doing some major updates to make layouting better, which is probably causing your problems. At the moment OrderedLayout is being worked on, and is quite buggy.

I think what’s happening is that the tables parents do not have a width set - previously a 100% component would only get as wide as other content ‘pushed’ the width, but apparently this is broken right now.

Depending on your case, a workaround would be to set a width for the tables parents (100% should be ok). Working around layouting bugs in the current trunk does not sound like a particularly good idea though…

I’ll try to ask what the status on this particular issue is…

Best Regards,
Marc