Viewport not using full screen

**Pompoen** · 12 Sep 2011 11:14 PM

I'm learning from a book of Packt Publishing(http://www.packtpub.com/ext-gwt-20-beginners-guide/book) and one of the first things it addresses is the creation of a viewport and the attachment of that viewport to the rootpanel.

Viewport viewport = new Viewport();
RootPanel.get().add(viewport);

This is all code. To see the viewport the stylesheet is adapted and .x-viewport is given a color.

All well until the application is launched: The viewport is there but according to the book(and to the screenshot in it) the viewport should take up the whole screen. In my application there is a border of about 10px on the top and left side of the page, as if there is a margin.

Am I forgetting something? I tried to set body{ margin: 0px 0px 0px 0px; } in the css but that did not have any result.
I can continue the examples in the book but the border stays there ... staring at me ... annoying me ... waiting until I'm at my weakest ... and one day he will get the best of me

.

My specs:
GWT 1.5.3
GXT 2.2.4
FireFox 3 and FireFox 4 (Safari 5.1 is not yet supported as the gwt plugin doesnt work there).

sven

There is another css loaded call clean.css which sets up the margin. Try to not inherit the clean gwt theme.

**sven** · 12 Sep 2011 11:20 PM

To see the viewport the stylesheet is adapted and .x-viewport is given a color.

Is only the className added or is there realy something behind this rule? Have you included the gxt-all.css file to your page?

**Pompoen** · 13 Sep 2011 2:32 AM

The html:

Code:

<!doctypehtml><!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->


<html>
<head>
<metahttp-equiv="content-type"content="text/html; charset=UTF-8">


<linktype="text/css"rel="stylesheet"href="rssreader.css">
<linktype="text/css"rel="stylesheet"href="gxt/css/gxt-all.css">


    <title>rssreader</title>
</head>




<body>
<!-- <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript> -->
<divid="loading">
<divclass="loading-indicator">
<imgsrc="gxt/images/default/shared/large-loading.gif"
				 width="32" height="32"/>Even geduld a.u.b.<br />
			<span id="loading-msg">Bezig met laden...</span>
</div>
</div>
<scripttype="text/javascript"src="rssreader/rssreader.nocache.js"></script>
</body>
</html>

The css rssreader.css:
.x-viewport
{
background-color: #ff0000;
}

The code rssreader.java:

Code:

	
public void onModuleLoad() {		
	Viewport viewport = new Viewport();
	RootPanel.get().add(viewport);
}

**Pompoen** · 13 Sep 2011 2:37 AM

The result of the code(with the annoying whitespace in the browser window):

Schermafbeelding 2011-09-13 om 12.34.31.jpg

**sven** · 13 Sep 2011 2:40 AM

Can you please upload your example somewhere, in a compiled format, so everyone could access it over http?

**Pompoen** · 13 Sep 2011 3:01 AM

You can find a deployed example on http://immotropolis.appspot.com

btw: tested with i.e. 8 and got the same result

Viewport not using full screen

Thread Tools

Search Thread

Display

Hybrid View

Answered: Viewport not using full screen

Answered: Viewport not using full screen