Explanation:
I am currently in the process of deploying a LibGDX GWT application to the browser.
Challenge:
In the image below, you can see the top left portion of my GWT application showcased by the large black rectangle. The issue here is the unwanted padding in the default grey color surrounding the application.
https://i.sstatic.net/Vb5hR.png
The next image displays the bottom right section of my GWT application with an undesired browser scrollbar, possibly caused by the aforementioned padding.
https://i.sstatic.net/I3OIQ.png
Objective:
My main goal is to present the complete GWT application without any cutoffs and distractions, essentially maximizing the use of screen space according to the client’s browser resolution. This means eliminating any padding or scrollbars and focusing solely on displaying the fully resolved content (while keeping the URL/bookmark section intact).
How do I align my GWT application (the content within the black rectangle) to the top-left corner to remove any unnecessary padding?
Additional Details:
The screenshots above are taken from a browser resolution of 1920x1080.
When running Gdx.app.log() on the platform-specific code, Width.getClientWidth() provides 1903, and Window.getClientHeight() gives 938 as output.
HtmlLauncher.java
public class HtmlLauncher extends GwtApplication {
@Override
public GwtApplicationConfiguration getConfig() {
return new GwtApplicationConfiguration(Window.getClientWidth(), Window.getClientHeight());
}
@Override
public ApplicationListener getApplicationListener() {
return Engine.getInstance();
}
}
Window.class
/**
* Retrieves the height of the client area of the browser window, excluding the scrollbar.
*
* @return the height of the client area of the window
*/
public static int getClientHeight() {
return Document.get().getClientHeight();
}
/**
* Retrieves the width of the client area of the browser window, excluding the vertical scrollbar.
*
* @return the width of the client area of the window
*/
public static int getClientWidth() {
return Document.get().getClientWidth();
}
index.html
<!doctype html>
<html>
<head>
<title>My Game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="soundmanager2-setup.js"></script>
<script src="soundmanager2-jsmin.js"></script>
</head>
<body>
<script type="text/javascript" src="html/html.nocache.js"></script>
</body>
</html>
styles.css
canvas {
cursor: default;
outline: none;
}
body {
background-color: #222222;
}
.superdev {
color: rgb(37,37,37);
text-shadow: 0px 0px 0px rgba(250,250,250,0.1);
font-size: 50pt;
display: block;
position: relative;
text-decoration: none;
background-color: rgb(83,87,93);
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 0px 0px 0px rgb(17,17,17),
inset 0px 0px 0px 0px rgba(250, 250, 250, .2),
inset 0px 0px 0px 0px rgba(0, 0, 0, .5);
width: 0px;
height: 0px;
border: 0;
border-radius: 0px;
text-align: center;
line-height: 0px;
}
.superdev:active {
box-shadow: 0px 0px 0px 0px rgb(34,34,34),
0px 0px 0px 0px rgb(17,17,17),
inset 0px 0px 0px 0px rgba(250, 250, 250, .2),
inset 0px 0px 0px 0px rgba(0, 0, 0, .5);
background-color: rgb(83,87,93);
top: 0px;
color: #fff;
text-shadow: 0px 0px 0px rgb(250,250,250);
}
.superdev:hover {
background-color: rgb(100,100,100);
}
Note: Certain default values in index.html and styles.css have been altered during troubleshooting efforts to address certain issues.