PDA

View Full Version : HBoxLayout Quirk



jlchristi
21 Mar 2011, 8:44 AM
I'm having problems getting a header with a logo image and title to render correctly when the app is initially loaded. When the app is first loaded, the logo image and the title are overlapping (see attachment). If you resize the browser, the logo and text are rendered correctly. Sometimes simply refreshing the browser will fix it. For some reason, it never renders correctly when the app is first loaded. Is this a bug or am I missing something? Thanks.


public class Logotest implements EntryPoint {

private static final String HEADER = "header";
private static final String HEADER_IMAGE = "images/logo.gif";
private static final String HEADER_TEXT = "headerText";
private static final String HEADER_TITLE = "Heading Title Goes Here";

private final Viewport viewport = new Viewport();

public void onModuleLoad() {
viewport.setLayout(new BorderLayout());

LayoutContainer lc = new LayoutContainer();
lc.addStyleName(HEADER);
HBoxLayout hLayout = new HBoxLayout();
hLayout.setHBoxLayoutAlign(HBoxLayoutAlign.MIDDLE);
lc.setLayout(hLayout);

lc.add(new Image(HEADER_IMAGE),new HBoxLayoutData(new Margins(0,20,0,0)));

HBoxLayoutData hBoxLayoutData = new HBoxLayoutData(new Margins(0,0,0,0));
hBoxLayoutData.setFlex(1);
Text text = new Text(HEADER_TITLE);
text.addStyleName(HEADER_TEXT);
lc.add(text,hBoxLayoutData);

BorderLayoutData layoutData = new BorderLayoutData(Style.LayoutRegion.NORTH,60);

viewport.add(lc,layoutData);
RootPanel.get("main").add(viewport);
}

// CSS in Logotest.css
//
// .header {
// background-color: #ff6600;
// color: #FFFFFF;
// height: 56px;
// padding: 5px;
// }
//
// .headerText {
// font-size: large;
// }

}