PDA

View Full Version : 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
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:


<!doctype html><!-- 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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<link type="text/css" rel="stylesheet" href="rssreader.css">
<link type="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> -->
<div id="loading">
<div class="loading-indicator">
<img src="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>
<script type="text/javascript" src="rssreader/rssreader.nocache.js"></script>
</body>
</html>




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

The code rssreader.java:


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):

28028
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
(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
There is another css loaded call clean.css which sets up the margin. Try to not inherit the clean gwt theme.

Thanks, its works!
pedrodonte
19 Dec 2011, 5:39 PM
Thanks, its works!
Could you put the code, please? I have the same problem.