VerticalLayout with table and scrollbar issue

I met a problem regarding VerticalLayout, in my code, I have a main window that adds 3 components from screen top to bottom:
1 - topLayout (a VeriticalLayout), at the web-page’s top side, just showing a label
2 - centerLayout (also a VeriticalLayout) , at the web-page’s center side, where I need to add specific content like forms or table with some data, also a group of buttons, etc.
3 - bottom panel - also show a label message.

Now, if I don’t set any height to centerLayout, when it is placed with a table (e.g. setPageLength=40, expecting to show 40 rows), I found in a page it actually doesn’t show 40 rows in a page, instead it shows 10+ rows with a scrollbar around the table (not the browser’s scrollbar at the right side), this is an issue, how can I just see 40 rows in a table page without scrolling the table, or how can I let the scrollbar be shown on the browser if I want to look more rows rather than on the table;

The bigger issue is: if I use a lower display resolution PC (e.g. 1000(width)*600(height)), I can’t see the button area on the centerLayout (which is made up of a table with 10+ rows in a page and a few buttons from top to bottom) , so I can’t do any operation on UI. The problem is that the layout can not be expanded to enable the browser’s scrollbar, so that button area disappears. As well the 3#bottom panel (a line of text) as I mentioned above also disappears. How can I solve this?

Same, if I set centerLayout with a fixed height e.g. ‘700px’, it might work in a higher display solution PC - e.g. 19001200 but not working in lower one e.g. 1000800 or 1000*600.

To the layout’s width, it seems it works fine for my case.

Anyone can show a help or tip to solve this kind of issue? Or share me info what’s the possible root cause of this?

Thanks!

Can anyone show some help on this issue?

The tables pagelength does not always control the height of the table, only when the table’s height is undefined (-1). So to see about 40 rows, you need to set the table height approximately to a size that shows 40 rows.

For the other problems (clipping content), source code would greatly help to spot the problem. Do note, that all Vaadin core layouts clip content that does not fit inside the layout’s dimensions. So if you keep all heights of the layouts undefined, everything should show up fine, and a scrollbar should become visible for the browser area.

If you need some more advanced solution (a fixed footer for example), you need combination of expand ratios and extra panels to provide the scrolling, or a CustomLayout.

here is some code piece for my table:
// the table will have around 50 rows to display

setPageLength(0);
setHeight(-1);
setFooterVisible(false);

I can’t see the scrollbar of Browser itself that its what I expect to see, the table expands all vertical UI areas and covers the bottom label as I want to show.

If setPageLength(0), then table’s scrollbar won’t be shown, if setPageLength(15) then the table scrollbar will be shown. However I like to see the scrollbar attached in Browser right-border…

Any idea?

More code would help to see the problem, since I really don’t know much about the overall layout structure of your app and what are the sizes of them.

Okay,you now can simply import my code (a
ll of my app logic related was removed, it’s pure for UI layout to show my question
) below to your IDE environment/project, and add relevant servlet mapping item in web.xml, then you will see how my UI/layout looks as well as what my code is, then please help to check
how I can modify the code to let table view show all rows
by the Browser scrollbar
instead of table right-side scrollbar, and make sure the label in bottom area be displayed as well

// my code below, no any application logic, just pure UI layout to demonstrate my question and seek the help

package com.mytest;

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

@SuppressWarnings(“serial”)
public class MainAppTest extends Application
{
private Window mainWindow ;

	private VerticalLayout topLayout = null;
	private VerticalLayout centerLayout = null;
	
	@Override
    public void init() 
    {
		mainWindow = new Window("My Main Window");
		setMainWindow(mainWindow); 
        setTheme("runo");     
        
        VerticalLayout mainLayout = new VerticalLayout();
        mainWindow.setContent(mainLayout);	 
        mainLayout.setMargin(true);
        mainLayout.setSizeFull();	        
        
        
        // topLayout to be placed with a simple label
        topLayout = new VerticalLayout ();
        Panel productName_panel = new Panel();	
        String showLogo = ""; 
        Label productNameLabel = new Label("<div align=bottom>" + showLogo + "<b>" + "My Product Name" + "</b>&nbsp;&nbsp;</div>",Label.CONTENT_XHTML);
        productNameLabel.setSizeFull();
        productName_panel.addComponent(productNameLabel);	        
        topLayout.addComponent(productName_panel); 
        
        
        HorizontalLayout menuBarLayout = new HorizontalLayout();	
        MenuBar _menuBar = generateMenuBar();
        menuBarLayout.addComponent(_menuBar);
        _menuBar.setWidth("900px");       
        
        
        TextField tfSearchText  = new TextField(); 	  
        tfSearchText.setInputPrompt("Search data...");
        
        Button buttonSearch = new Button(""); 	      
        buttonSearch.setStyleName("link"); 
        buttonSearch.addListener(new MyClickListener(tfSearchText));
              
        menuBarLayout.addComponent(tfSearchText); // show search button in the menubar layout too
        menuBarLayout.addComponent(buttonSearch);
        
        mainWindow.addComponent(topLayout);  
        topLayout.addComponent(menuBarLayout);	// add MenuBar into the topLayout also 
        
        
         centerLayout = new VerticalLayout();	// Center Layout to display main content (e.g. a table or a form) of this main window        
         centerLayout.addComponent(new MyTable());
         mainWindow.addComponent(centerLayout);
         
        
         // the bottom side will only display a text message (or plus a small icon) only
        Panel botPanel = new Panel();	
        Label copyrightLabel  = new Label("<div>" + "Company Name" + "Copyright Info"
        		+ "&nbsp;&nbsp;",Label.CONTENT_XHTML);                            
        copyrightLabel.setSizeFull();
        botPanel.addComponent(copyrightLabel);   
        mainWindow.addComponent(botPanel);  
        
    } // end of init
	
	
	final class MyClickListener implements Button.ClickListener
	{
		private TextField tfText = null;
		MyClickListener(TextField searchText)
		{
			tfText = searchText;
		}
		
		public void buttonClick(ClickEvent event)
		{
		
			mainWindow.showNotification("Searching:" + tfText.getValue());
			
		}
	}
	
	// test menubar
	private MenuBar generateMenuBar()
	{
    	MenuBar menubar = new MenuBar();
    	for(int i=0;i<6;i++) 
 	    {
  		   MenuBar.MenuItem menuItem = menubar.addItem("Menu#" + i,null);	
  		   for(int k=0;k<5;k++)
  			 menuItem.addItem("Sub-menu#"+k, null);
  		 
 	    }
        
        return menubar;       
	}
	
	class MyTable extends Table
	{
		
		MyTable()
		{
		   setTableColumns();
		   int dataRows = 60;
		   
		   for (int i=0; i<dataRows; i++) 
		   {		   
			   Object row[] = new Object[4]

;
Integer itemId = new Integer(i);
row[0]
= “Hello String”;
row[1]
= new Label(“Hello a Label”);
row[2]
= new Label(“Hello another Label”);
row[3]
= new Label(“Hello the 3rd Label”);
addItem(row, itemId);
}

		   //>> Question??: How to show all rows in a page by Browser right-side scrollbar instead of showing a scrollbar around the table right-border
		   
			  // setPageLength(-1);  // even I put this code, it doesn't work for what I expect
		   // setPageLength(60);  // even I put this code line, it doesn't work for what I expect, and I won't see the right-bottom Copyright label any more
		   setFooterVisible(false);	
		}
		
		private void setTableColumns()
		{
			   addContainerProperty("String 1", String.class, null);
			   addContainerProperty("Label 1", Label.class,null);
			   addContainerProperty("Label 2",Label.class,null);
			   addContainerProperty("Label 3", Label.class,null);				 
			   setWidth("80%");
		}
	}

}

Two alternative solutions attached:
In both cases, set the height of the table to undefined (and width probably to 100%) and the pageLength to zero.

  1. Use expand ratio on the mainLayout (
    mainLayout.setExpandRatio(centerLayout, 1);
    )and set the centerLayout to 100% size (
    centerLayout.setSizeFull()
    )
  2. Don’t set the height of the mainLayout to 100%
    11561.java (5.02 KB)
    11562.java (4.92 KB)

Please guys, how to use the CKEditor in vaadin, like using the RichTextArea?

Is there a way to remove a junk like this?

  • To improve information dissemination to all targeted users.
  • The real String should be : “To improve information dissemination to all targeted users”

    How can I remove those HTML tag…any code formatting?

    Thanks…