1. #1
    Ext User
    Join Date
    May 2008
    Location
    Raleigh, NC
    Posts
    20
    Vote Rating
    0
    bparker11 is on a distinguished road

      0  

    Default [Fixed] IE Bug with TextField in Table

    [Fixed] IE Bug with TextField in Table


    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:

    Code:
    .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

  2. #2
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    May 2008
    Location
    Raleigh, NC
    Posts
    20
    Vote Rating
    0
    bparker11 is on a distinguished road

      0  

    Default


    Actually, I have no DOCTYPE defined.

  4. #4
    Ext User
    Join Date
    May 2008
    Location
    Raleigh, NC
    Posts
    20
    Vote Rating
    0
    bparker11 is on a distinguished road

      0  

    Default


    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.

    Code:
    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

  5. #5
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    What version of IE and OS are you having problems with? The code works fine for me.

  6. #6
    Ext User
    Join Date
    May 2008
    Location
    Raleigh, NC
    Posts
    20
    Vote Rating
    0
    bparker11 is on a distinguished road

      0  

    Default


    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">

  7. #7
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    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.

  8. #8
    Ext User
    Join Date
    May 2008
    Location
    Raleigh, NC
    Posts
    20
    Vote Rating
    0
    bparker11 is on a distinguished road

      0  

    Default


    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:

    Code:
    <!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
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    My text field disappears.

    Thanks,

    Brock

  9. #9
    Ext User
    Join Date
    May 2008
    Location
    Raleigh, NC
    Posts
    20
    Vote Rating
    0
    bparker11 is on a distinguished road

      0  

    Default


    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

  10. #10
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    Try adding this CSS to you host page after the ext-all.css entry:

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

Thread Participants: 1