PDA

View Full Version : Html widget renders table differently in firefox compared to IE



blacklightburns
9 Dec 2009, 5:09 AM
Hi,

I am working on windows xp, GWT 1.7, GXT 2.0.1. firefox version 3.5.5, ie 8

When I add an Html widget (containing html code to render an html table) onto a LayoutContainer, the widget is rendered correctly in IE, but when using firefox 3.5.5 the table displays every <td> as though it were on its on row. I have also tried using an HtmlContainer but the result is the same. Here is an example of the code I am using:


import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.extjs.gxt.ui.client.widget.layout.MarginData;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;

import com.google.gwt.user.client.Element;


public class LeadInfoTestPage extends LayoutContainer{

private ModelData webLead;

public LeadInfoTestPage() {
webLead = new BaseModelData();
}

protected void onRender(Element parent, int index) {
super.onRender(parent, index);

LayoutContainer layoutContainer = new LayoutContainer();
layoutContainer.setLayout(new RowLayout(Style.Orientation.VERTICAL));

layoutContainer.add(layoutLeadDetailsPanel(), new RowData(1, -1, new Margins(0)));

ContentPanel bodyPanel = new ContentPanel();
bodyPanel.setHeaderVisible(false);
bodyPanel.setBodyBorder(false);
bodyPanel.setFrame(false);
bodyPanel.setLayout(new FillLayout(Style.Orientation.VERTICAL));

bodyPanel.add(layoutContainer);

add(bodyPanel, new MarginData(0));
}

private LayoutContainer layoutLeadDetailsPanel(){
ContentPanel leadDetailsPanel = new ContentPanel();
leadDetailsPanel.setBodyBorder(false);
leadDetailsPanel.setFrame(true);
leadDetailsPanel.setHeading("Lead Details");
leadDetailsPanel.setCollapsible(true);

leadDetailsPanel.add(getLeadDetailsTable());

return leadDetailsPanel;
}

private Html getLeadDetailsTable(){
String table = "<table width='100%'><tbody><tr><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Web Reference</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Date</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Referral</td><td class='x-form-item' valign='top' ></td></tr><tr><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Name</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Cell Phone</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Home Phone</td><td class='x-form-item' valign='top' ></td></tr><tr><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Work Phone</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Email</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Occupation Status</td><td class='x-form-item' valign='top' ></td></tr><tr><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>ID Type</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>ID Number</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Locked By</td><td class='x-form-item' valign='top' ></td></tr><tr><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Marital Status</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Receive Marketing Info</td><td class='x-form-item' valign='top' ></td><td class='x-form-item' valign='top' align='right' style='font-weight: bold; padding-right: 10px;'>Where they heard about us</td><td class='x-form-item' valign='top' ></td></tr></tbody></table>";
return new Html(table);
}
}


Can anyone tell me if this is this a problem in GXT, or whether there something I am doing incorrectly to add this html table?

Any help will be appreciated.
Thanks

Arno.Nyhm
10 Dec 2009, 6:49 AM
it comes from the css with "x-form-item" with display:block.

if you remove this style from your table-cell td then it is displayed in a table.

blacklightburns
11 Dec 2009, 6:42 AM
Thanks Arno, works perfectly!