Hi folks,
I'm having trouble with the layout of a Gwt widget in a SmartGwt application. My app has a fixed-height header (toolbar with menus), a fixed-height footer (status info), and a page (selected according to the menu) that stretches to fill the remaining space. On one of the pages, I have a fixed-height DynamicForm and google map that should (but does not) fill the remaining space on the page.
My problem is that I cannot figure out how to set the height of the google map to fill the page. If I set the height of the map as "100px", it will indeed be 100 pixels high, but setting "100%" results in a height of 0.
To make this easier to reproduce, I replaced all my widgets with SmartGwt Labels and replaced the map with a Gwt Label, so that my "app" now consists of an index.html (which has a "style" section to set the height of the Gwt label in css) and a single SmartGwt java file. Both of these files are shown below.
The result of compiling and running this app is shown in the attachment, where you can see that the height of the Gwt Label (analog my map) is minimized according to content, and not expanding to fill the space available.
I'm using FireFox 11.0 and Chrome 21.0.1180.82 - both behave in the same way. The SmartClient Developer Console shows: SmartClient Version: v8.2p_2012-07-16/LGPL Development Only (built 2012-07-16)
I'd be very grateful to anyone who can figure out how to get the map to expand to fill all of the height available on the page.
Finally, here are the index.html and the SmartGwt java file.
index.html
AppLoader.java
Sincere thanks to anyone who can help!
I'm having trouble with the layout of a Gwt widget in a SmartGwt application. My app has a fixed-height header (toolbar with menus), a fixed-height footer (status info), and a page (selected according to the menu) that stretches to fill the remaining space. On one of the pages, I have a fixed-height DynamicForm and google map that should (but does not) fill the remaining space on the page.
My problem is that I cannot figure out how to set the height of the google map to fill the page. If I set the height of the map as "100px", it will indeed be 100 pixels high, but setting "100%" results in a height of 0.
To make this easier to reproduce, I replaced all my widgets with SmartGwt Labels and replaced the map with a Gwt Label, so that my "app" now consists of an index.html (which has a "style" section to set the height of the Gwt label in css) and a single SmartGwt java file. Both of these files are shown below.
The result of compiling and running this app is shown in the attachment, where you can see that the height of the Gwt Label (analog my map) is minimized according to content, and not expanding to fill the space available.
I'm using FireFox 11.0 and Chrome 21.0.1180.82 - both behave in the same way. The SmartClient Developer Console shows: SmartClient Version: v8.2p_2012-07-16/LGPL Development Only (built 2012-07-16)
I'd be very grateful to anyone who can figure out how to get the map to expand to fill all of the height available on the page.
Finally, here are the index.html and the SmartGwt java file.
index.html
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>SmartGwtDemo</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<script> var isomorphicDir = "gwt_demo/sc/"; </script>
<script>window.isc_useSimpleNames = false</script>
<script type="text/javascript" src="gwt_demo/gwt_demo.nocache.js"></script>
<style type="text/css">
.jae-GwtLabel{
color: #ffffff;
background-color:#ff0000;
width: 90%;
height: 100%;
}
</style>
</head>
<body id="page">
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<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>
</body>
</html>
Code:
package de.jaemc.demo.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;
public class AppLoader implements EntryPoint {
VLayout viewPort = new VLayout();
Layout head = new Layout();
VLayout page = new VLayout();
Layout foot = new Layout();
@Override
public void onModuleLoad() {
Window.enableScrolling(false);
Window.setMargin("50px");
viewPort.setShowEdges(true);
viewPort.setWidth100();
viewPort.setHeight100();
viewPort.setMembersMargin(5);
viewPort.setLayoutMargin(10);
// Create a header.
head.setHeight(50);
head.setWidth100();
head.setBackgroundColor("#C3D9FF");
head.addMember(new Label("Head"));
// Create a page with all the stretch - and no content for now.
page.setHeight("*"); // take all the stretch
page.setWidth100();
page.setBackgroundColor("#dddddd");
// Create a footer.
foot.setHeight(50);
foot.setWidth100();
foot.setBackgroundColor("#C3D9FF");
foot.addMember(new Label("Foot"));
viewPort.addMember(head);
viewPort.addMember(page);
viewPort.addMember(foot);
viewPort.draw();
Timer t = new Timer() {
@Override
public void run() {
addContentsToPage();
}
};
// Schedule the timer to run once after 0.1 second.
t.schedule(100);
}
private void addContentsToPage(){
// Add label 1. This is a SmartGwt widget and has a height of 50px
Label smartGwtLabel = new Label();
smartGwtLabel.setContents("This is a SmartGwt Widget : height = 50px");
smartGwtLabel.setBackgroundColor("#00ff0f");
smartGwtLabel.setHeight(50);
smartGwtLabel.setWidth("90%");
// Add label 2. This is a Gwt Widget and should take up all remaining height.
com.google.gwt.user.client.ui.Label gwtLabel = new com.google.gwt.user.client.ui.Label();
gwtLabel.setText("This is a Gwt Widget : Height (set is css) = 100%. Note the error in the display sizes");
gwtLabel.addStyleName("jae-GwtLabel");
page.addMember(smartGwtLabel);
page.addMember(gwtLabel);
}
}
Attached Files
Comment