PDA

View Full Version : [CLOSED] Error with FormLayout on TabPanel in Window


posta07
24 Jul 2008, 1:56 PM
When I add a form to a tab panel, and then the tab panel to the window, the form elements do not render properly, specifically, the elements get shifted up into the tabs.

Once compiled, everything renders properly in FF3. However, in the GWT hosted mode and in IE 6 the error presents itself. Using latest from the Trunk, and GWT 1.5.0

See code for demo:


public void onModuleLoad() {

Viewport viewport = new Viewport();
viewport.setLayout(new FlowLayout());
final Window popup = new Window();
popup.setLayout(new FlowLayout());
popup.setWidth(500);

Button button = new Button("Samples");
button.addSelectionListener(new SelectionListener<ComponentEvent>() {

@Override
public void componentSelected(ComponentEvent ce) {
popup.show();

}

});

TabPanel tabs = new TabPanel();
TabItem tab1 = new TabItem();
tab1.setText("Tab 1");
tab1.setLayout(new FormLayout());

TabItem tab2 = new TabItem();
tab2.setText("Tab 2");
tab2.setLayout(new FormLayout());

TextField<String> name = new TextField<String>();
name.setFieldLabel("Name");
name.setValue("Christian");
tab1.add(name, new FormData());

tabs.add(tab1);
tabs.add(tab2);

popup.add(tabs);




Html moreDetail;
moreDetail = new Html("<span class='x-nodrag' style='text-decoration: underline; cursor: pointer'>more detail</span>&nbsp;");
popup.getHeader().insertTool(moreDetail, 0);


moreDetail.sinkEvents(Events.OnClick);

moreDetail.addListener(Events.OnClick, new Listener<ComponentEvent>() {


public void handleEvent(ComponentEvent be) {

DeferredCommand.addCommand(new Command() {


public void execute() {

MessageBox.alert("Click", "You clicked it!", null);
}
});
}
});


viewport.add(moreDetail);
RootPanel.get().add(button); }
gslender
24 Jul 2008, 3:28 PM
this could be doctype - make sure its
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
posta07
24 Jul 2008, 3:31 PM
No, it's not the Doctype.
Doctype is correct in the html page.


Thanks though :-/
gslender
24 Jul 2008, 4:26 PM
Well something environmental with you might be the issue - I got correct render on GXT 1.01 and GWT 1.5 and JRE 1.6 on WinXP / IE6 / hosted and not - see attached ss
gslender
24 Jul 2008, 4:36 PM
....ahhh, but I can reproduce when using latest from SVN... seems to be a layout bug that corrects itself when you resize/move the window - Darrell will need to check this
posta07
24 Jul 2008, 4:37 PM
Yes, that's exactly what it is :)
I was at a loss when you told me you found no problem.

Thanks for helping to look into it!!!
darrellmeyer
24 Jul 2008, 5:39 PM
FormLayout uses absolute positioning. This basically means auto height will not work. In your code, you need to give the window a height, and it should use a FitLayout to size the TabPanel.


public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());


final Window popup = new Window();
popup.setLayout(new FitLayout());
popup.setSize(500, 125);

Button button = new Button("Samples");
button.addSelectionListener(new SelectionListener<ComponentEvent>() {

@Override
public void componentSelected(ComponentEvent ce) {
popup.show();

}

});

TabPanel tabs = new TabPanel();
TabItem tab1 = new TabItem();
tab1.setText("Tab 1");
tab1.setLayout(new FormLayout());

TabItem tab2 = new TabItem();
tab2.setText("Tab 2");
tab2.setLayout(new FormLayout());

TextField<String> name = new TextField<String>();
name.setFieldLabel("Name");
name.setValue("Christian");
tab1.add(name, new FormData());

tabs.add(tab1);
tabs.add(tab2);

tabs.setSelection(tab1);

popup.add(tabs);

Html moreDetail;
moreDetail = new Html(
"<span class='x-nodrag' style='text-decoration: underline; cursor: pointer'>more detail</span>&nbsp;");
popup.getHeader().insertTool(moreDetail, 0);

moreDetail.sinkEvents(Events.OnClick);

moreDetail.addListener(Events.OnClick, new Listener<ComponentEvent>() {

public void handleEvent(ComponentEvent be) {

DeferredCommand.addCommand(new Command() {

public void execute() {

MessageBox.alert("Click", "You clicked it!", null);
}
});
}
});

viewport.add(moreDetail);
RootPanel.get().add(button);

}
posta07
25 Jul 2008, 3:57 PM
Yessir. this works.

thanks greatly for your help!