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

**sven** · 13 Sep 2011, 3:26 AM

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

**Pompoen** · 13 Sep 2011, 3:30 AM

And how do I not inherit the clean gwt theme? Probably in one of the xml's.

I guess that it is solved then, I'll try it this evening

.

**sven** · 13 Sep 2011, 3:33 AM

In the modulename.gwt.xml file where you also inherit the gxt module.

**Jurasec** · 9 Dec 2011, 10:31 AM

Originally Posted by sven

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

Thanks, its works!

Thread: Viewport not using full screen

Thread Tools

Search Thread

Display

Answered: Viewport not using full screen

Posting Permissions