[CLOSED] Using Viewport - gxt-2.1.1-beta

[pourmo]

Hi
Please find a test case below. The test app runs fine using IE6; however on FF and Chrome we get a blank gap on top of the page. We have notice similar behavior using earlier gxt versions.
We have tested this for different options (shown as comments in the code).

env:
GWT 2.0;
gxt-2.1.1-beta-gwt2
Windows XP

Many thanks for your help.

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.HtmlContainer;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.FillToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;



public class MyTestApp implements EntryPoint {
	
	public void onModuleLoad() {
		RootPanel rootPanel = RootPanel.get();
		initComponents();		
		rootPanel.add(viewport);
	}
	
	private Viewport viewport;
	private ContentPanel contentPanel;
	  
	private void initComponents() {
	
	    viewport = new Viewport();	    
	    viewport.setLayout(new BorderLayout());
	    
		contentPanel = new ContentPanel();
		contentPanel.setHeaderVisible(false);
		contentPanel.setLayout(new FitLayout());
	    
	    createNorth();
            
            //OR

	    //createNorth2();
	    
	    TabPanel panel = new TabPanel();
	    panel.setResizeTabs(true);
	    TabItem example = new TabItem("Example");
	    example.setScrollMode(Scroll.AUTO);

	    example.setLayout(new FitLayout());
	    example.setScrollMode(Scroll.NONE);

	    panel.add(example);

	    ToolBar toolBar = new ToolBar();
	    Button item = new Button("View Source");

	    toolBar.add(new FillToolItem());
	    toolBar.add(item);
	    
	    contentPanel.add(panel);

	    viewport.add(contentPanel, new BorderLayoutData(LayoutRegion.CENTER));
	    RootPanel.get().add(viewport);
	  }


	  private void createNorth() {
		  	ContentPanel northPanel = new ContentPanel();
		  	northPanel.setHeaderVisible(false);
		  	northPanel.setLayout(new FitLayout());
		  	northPanel.add(new Label("This is a Label for North"));

		  	//issue occurs for the following
		    BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 33);
		    data.setMargins(new Margins());
		    viewport.add(northPanel, data);
		    
		    
		    //also for
		    //contentPanel.setTopComponent(northPanel);
	  }	
	
	  private void createNorth2() {
		    StringBuffer sb = new StringBuffer();
		    sb.append("<div id='demo-header' class='x-small-editor'><div id='demo-theme'></div><div id=demo-title>Ext GWT Examples</div></div>");
		    HtmlContainer northPanel = new HtmlContainer(sb.toString());
		    northPanel.setStateful(false);
		    
		    //issue occurs for the following
		    
		    //BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 33);
		    //data.setMargins(new Margins());
		    //viewport.add(northPanel, data);
		    
		    //also for
		    contentPanel.setTopComponent(northPanel);
		  }	
	
}

[Arno.Nyhm]

just as idea: did you updated also all css and resources from the new gxt 2.1.1 package?

[sven]

Wrong css cannot be linked to the problem.

How does your index.html file look like with that you are loading your application? Is it possible that there are elements inside the body tag?

[pourmo]

It seems to be OK with IE and a newer FF-3.5.7 but still a problem under Chrome.
Here is the index.html; the resources bundle is correct and named as ExtGWT.
It seems as if the whole page has been pushed down about 30px.

Thanks for your help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--                                                               -->
		<!-- Consider inlining CSS to reduce the number of requested files -->
		<!--                                                               -->
		<link type="text/css" rel="stylesheet" href="ExtGWT/css/gxt-all.css">
		<link type="text/css" rel="stylesheet" href="MyTestApp.css">
	
		<!--                                           -->
		<!-- Any title is fine                         -->
		<!--                                           -->
		<title>MyTestApp</title>

		<!--                                           -->
		<!-- This script loads your compiled module.   -->
		<!-- If you add any GWT meta tags, they must   -->
		<!-- be added before this line.                -->
		<!--                                           -->
		<script language="javascript" src="com.mycompany.project.MyTestApp/com.mycompany.project.MyTestApp.nocache.js"></script>
		
	</head>

	<!--                                           -->
	<!-- The body can have arbitrary html, or      -->
	<!-- we leave the body empty because we want   -->
	<!-- to create a completely dynamic ui         -->
	<!--                                           -->
	<body>

		<!-- OPTIONAL: include this if you want history support -->
		<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

	</body>
</html>

and MyTestApp.gwt.xml

<module>
	<inherits name="com.google.gwt.user.User"/>
	<inherits name="com.google.gwt.user.theme.standard.Standard"/>
	<entry-point class="com.mycompany.project.client.MyTestApp"/>
	<inherits name="com.extjs.gxt.ui.GXT"/>
</module>

[sven]

Please upload a fully working, compiled application here where we can simple open the html file to see this issue. Does the explorer demo work for you in every browser? It is using a viewport. Also it is quite impossible that this is really an issue in GXT because you aer the first one reporting this.

[SmallerPlatypus]

I have a similar issue, but the viewport is moving up by about 20px when I add a tab. I've just migrated to 2.1 and the problem is worse now - I used to be able to fix it (when using 1.2.4) by resetting the viewport position to 0,0 but this doesn't help now. I'm using a layout based on the Explorer - ie same north, west and centre panels.

Regards,

Matt.

[pourmo]

Yes, absolutely; on our other application under Chrome we are also experiencing similar issue - the viewport is moving up by about 20px;
I have tried to upload the compiled project in a zip file with its size less than the max limit but for some reason the upload fails - I'll try to upload it using a Ticket.

Thanks

[pourmo]

The viewport instance was added twice;
removing the line: RootPanel.get().add(viewport); fixed the problem.

Thanks