PDA

View Full Version : [Fixed] IE Bug with TextField in Table



bparker11
23 May 2008, 4:21 AM
There is a problem in the ext-all stylesheet in IE. The scenario is that I have several TextFields added to a Table. The Table is rendered perfectly in Firefox but in IE the TextFields do not appear in the Table. It seems to be due to this element in ext-all.css:


.ext-ie td .x-form-text{position:relative;top:-1px;}When I remove "position:relative" it works just fine. I have had to do this with each GXT release. Hopefully this can be safely removed from the project.

Thanks,

Brock

darrellmeyer
30 Jun 2008, 6:29 PM
The style is needed for IE and has been tested on IE 6 / 7 on XP / Vista. What doctype are type are you using? If you are using anything other than quirks (cannot use xhtml or strict), try removing the doctype declaration from your host page.

bparker11
1 Jul 2008, 10:51 AM
Actually, I have no DOCTYPE defined.

bparker11
1 Jul 2008, 12:12 PM
Here is a demo of my problem. The DOCTYPE in my host file is the same as what you have defined in the setup.txt file. This code works just fine in Firefox. Only in IE/Hosted Mode does "MyTextField" not show up.



package com.mck.pae.web.ui.gwt.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.table.Table;
import com.extjs.gxt.ui.client.widget.table.TableColumn;
import com.extjs.gxt.ui.client.widget.table.TableColumnModel;
import com.extjs.gxt.ui.client.widget.table.TableItem;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class TableTest implements EntryPoint
{
private Table table;

public void onModuleLoad()
{
VerticalPanel panel = new VerticalPanel();

List<TableColumn> columns = new ArrayList<TableColumn>();
int columnWidth = 150;
TableColumn column = new TableColumn("My Text Field", columnWidth);
columns.add(column);

TableColumn column2 = new TableColumn("GXT Text Field", columnWidth);
columns.add(column2);

TableColumn column3 = new TableColumn("GWT Text Field", columnWidth);
columns.add(column3);

TableColumnModel cm = new TableColumnModel(columns);
table = new Table(cm);

table.setSize(500, 200);
table.setBulkRender(false);

panel.add(table);
RootPanel.get().add(panel);
GXT.hideLoadingPanel("loading");

DeferredCommand.addCommand(new Command()
{
public void execute()
{
addFields();
}
});
}

protected void addFields()
{
for (int i = 0; i < 3; i++)
{
TableItem item = new TableItem(new Object[3]);

MyTextField field1 = new MyTextField();
field1.setWidth("140px");

TextField<String> field2 = new TextField<String>();
field2.setWidth(140);
field2.setAllowBlank(false);

TextBox field3 = new TextBox();
field3.setWidth("140px");

item.setWidget(0, field1);
item.setWidget(1, field2);
item.setWidget(2, field3);
this.table.add(item);
}
}

private class MyTextField extends Composite
{
private HorizontalPanel mainPanel;
private TextField<String> textField;

public MyTextField()
{
this.mainPanel = new HorizontalPanel();
this.initWidget(this.mainPanel);

this.textField = new TextField<String>();
this.mainPanel.add(this.textField);
}

public void setWidth(String width)
{
this.mainPanel.setWidth(width);
this.textField.setWidth(width);
}
}
}

Thanks,

Brock Parker

darrellmeyer
2 Jul 2008, 7:10 AM
What version of IE and OS are you having problems with? The code works fine for me.

bparker11
2 Jul 2008, 7:50 AM
I'm using Windows XP and IE 7 (7.0.5730.11 to be exact). This code also fails in hosted mode. This is what I have for my doc type.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

darrellmeyer
2 Jul 2008, 8:02 PM
I cannot reproduce the problem you are having on XP / Vista IE 6 / 7. Are you using any CSS other than GXT? If so, try without. If you still have problems, compile your test page, zip up the www folder and attach it here.

bparker11
3 Jul 2008, 5:01 AM
I created an empty project with just this class and I don't see the problem there. However, GWT puts this DOCTYPE in the host file when you use the applicationCreator command:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
When I change the DOCTYPE to the one GXT requires


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
My text field disappears.

Thanks,

Brock

bparker11
14 Jul 2008, 5:32 AM
I was on vacation last week so it's taken me a while to get back to you on this...

The zip file for my project's www folder exceeds the limit allowed by this forum. Would you rather me attach several files or is there another option?

Thanks,

Brock

darrellmeyer
15 Jul 2008, 8:56 AM
Try adding this CSS to you host page after the ext-all.css entry:


.ext-ie .my-tbl TD .x-form-text {
POSITION: static;
TOP: 0px;
}

bparker11
15 Jul 2008, 10:59 AM
That appears to have fixed my problem. Will I need to add this to my CSS moving forward or will this fix be added to the SVN?

Thanks,

Brock

darrellmeyer
15 Jul 2008, 11:43 AM
The change is in SVN.