Issue with ComboBox size when added to section in HTML document.

[baradas]

Hi,
I am using the code sample for the FormPanel. Facing problems with combo width.
Have attached a screenshot which shows the problem as well.

Ext GWT version - 1.0-beta5, (jar file gxt-1.0-beta5)
GWT Version - 1.5.0 RC1

Issue Description -
Problems with combo box width .
When I add the FormPanel to my RootPanel using RootPanel.get() then everything is fine, the demo works as shown.

However my HTML page is divided into sections using the <div> tag. When I add the FormPanel to one such section (called main) in my HTML document using RootPanel.get("main") then the rendered combo box does not have correct width. i.e it gets a default width of 4px.

Find included below supporting code for FormPanelPage, TestData and HTML page used.

/* 
 * Ext GWT - Ext for GWT 
 * Copyright(c) 2007, 2008, Ext JS, LLC. 
 * licensing@extjs.com 
 *  
 * http://extjs.com/license 
 */  
package com.swc.reporting.client.views;  
  
import java.util.Collections;
import java.util.Comparator;
import java.util.List;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.HorizontalPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.CheckBoxGroup;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.Radio;
import com.extjs.gxt.ui.client.widget.form.RadioGroup;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.TimeField;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
   
 public class FormPanelPage extends LayoutContainer implements EntryPoint {  
   
   public void onModuleLoad() { 
       HorizontalPanel hp = new HorizontalPanel();
       VerticalPanel vp = new VerticalPanel();
       
       vp.add(this);
       hp.add(vp);
     RootPanel.get("main").add(hp);  
   }  
   
   public FormPanelPage() {  
     FormPanel panel = getFormPanel();  
   
     add(panel);  
   }

/**
 * @return
 */
private FormPanel getFormPanel() {
    FormPanel panel = new FormPanel();  
//     panel.setFrame(true);  
     panel.setFieldWidth(210);  
     panel.setLabelWidth(100);  
//     panel.setButtonAlign(HorizontalAlignment.CENTER);  
//     panel.setHeading("Simple Form");  
//     panel.setIconStyle("icon-form");  
     panel.setWidth(400);  
     panel.setStyleAttribute("padding", "20");  
   
     TextField text = new TextField();  
     text.setFieldLabel("Name");  
     text.setEmptyText("Enter your full name");  
     text.setAllowBlank(false);  
     text.setMinLength(4);  
     panel.add(text);  
   
     NumberField number = new NumberField();  
     number.setFieldLabel("Age");  
     number.setEmptyText("Enter your age");  
     number.setAllowBlank(false);  
     panel.add(number);  
   
     text = new TextField();  
     text.setFieldLabel("Email");  
     panel.add(text);  
   
     List<Stock> stocks = TestData.getStocks();  
     Collections.sort(stocks, new Comparator<Stock>() {  
       public int compare(Stock arg0, Stock arg1) {  
         return arg0.getName().compareTo(arg1.getName());  
       }  
     });  
   
     ListStore store = new ListStore();  
     store.add(stocks);  
   
     ComboBox combo = new ComboBox();  
     combo.setFieldLabel("Company");  
     combo.setDisplayField("name");  
     combo.setWidth(210);  
//     combo.setAutoWidth(true);
     combo.setStore(store);  
     panel.add(combo);  
   
     DateField date = new DateField();  
     date.setFieldLabel("Birthday");  
     date.setWidth(210);  
     panel.add(date);  
   
     TimeField time = new TimeField();  
     time.setFieldLabel("Time");  
     time.setWidth(200);  
     panel.add(time);  
   
     CheckBox check1 = new CheckBox();  
     check1.setBoxLabel("Classical");  
   
     CheckBox check2 = new CheckBox();  
     check2.setBoxLabel("Rock");  
     check2.setValue(true);  
   
     CheckBox check3 = new CheckBox();  
    check3.setFieldLabel("Blue");  
   
     CheckBoxGroup checkGroup = new CheckBoxGroup();  
     checkGroup.setFieldLabel("Music");  
     checkGroup.add(check1);  
     checkGroup.add(check2);  
     checkGroup.add(check3);  
     panel.add(checkGroup);  
   
     Radio radio = new Radio();  
     radio.setName("radio");  
     radio.setFieldLabel("Red");  
     radio.setValue(true);  
   
     Radio radio2 = new Radio();  
     radio2.setName("radio");  
     radio2.setFieldLabel("Blue");  
   
     RadioGroup radioGroup = new RadioGroup("test");  
     radioGroup.setFieldLabel("Favorite Color");  
     radioGroup.add(radio);  
     radioGroup.add(radio2);  
     panel.add(radioGroup);  
   
     TextArea description = new TextArea();  
     description.setPreventScrollbars(true);  
     description.setInitialHeight(50);  
     description.setFieldLabel("Description");  
     panel.add(description);  
   
     panel.addButton(new Button("Save"));  
     panel.addButton(new Button("Cancel"));
    return panel;
}  
   
 }

/*
 * Ext GWT - Ext for GWT
 * Copyright(c) 2007, 2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
package com.swc.reporting.client.views;

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


public class TestData {

  public static List<Stock> getStocks() {
      List<Stock> stocks = new ArrayList<Stock>();
      
      stocks.add(new Stock("Apple Inc.", "AAPL", 125.64, 123.43));
      stocks.add(new Stock("Cisco Systems, Inc.", "CSCO", 25.84, 26.3));
      stocks.add(new Stock("Google Inc.", "GOOG", 516.2, 512.6));
      return stocks;

    }

}

    <head>
        <title>SWC</title>
        <script type="text/javascript" src="script/prototype.js"></script>
        <script type="text/javascript" src="script/effects.js"></script>
        <script type="text/javascript" src="styles/ext-all.js"></script>
           <link rel="stylesheet" type="text/css" href="styles/swc.css">
           <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
        <style>
            body,td,a,div,.p{font-family:arial,sans-serif;font-size:0.9em}
            div,td{color:#000000}
            a:link,.w,.w a:link{color:#0000cc}
            a:visited{color:#551a8b}
            a:active{color:#ff0000}
        </style>
        <meta name='gwt:module' content='com.swc.reporting.MyApp'>
    </head>
    <body>
        <script language='javascript' src='com.swc.reporting.MyApp.nocache.js'></script>
        <div id="wrap">
            <div id="header">
            </div>
            <div id="main" style="OVERFLOW: visible; WIDTH: 100%"> 
                                        
            <!-- main ends here -->    
            </div>
        
            <!-- wrap ends here -->
        </div>        

        <!-- footer starts here -->        
        <div id="footer">
        </div>    
        <!-- footer ends here -->

    </body>

[gslender]

try using FireBug to work out which style/CSS is being applied such that it breaks in your HTML

[gslender]

...also note you are including ext-all.js (line 4) and the GXT ext-all.css - strip everything you can and work backwards (adding things to see when it breaks)

[baradas]

I stripped the HTML to the bare bones version. And the problem still persists.

Here's my diagnosis so far.
The problem is with the the trigger element that is generated in the onRender method of the TriggerField class.
The width of the trigger as is different when I use case #1 as against case #2.
The width of the trigger field is based on the offsetWidth of the DOM object and this is different for the cases mentioned.

Am I missing something or why should the width of the trigger element be based on the offsetWidth?

Case #1 - Add to section of the HTML document
Width of the input element - Using Root.get("main").add(comboPanel)
<input type="text" class="x-form-field x-form-text" tabindex="0" style="width: 4px;"/>

Case #2 - Add to HTML document directly
Width of the input element - Using Root.get().add(comboPanel)
<input class="x-form-field x-form-text" type="text" tabindex="0" style="width: 193px;"/>

<html>
    <head>
        <title>SWC</title>
           <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
           <!--             
        <meta name='gwt:module' content='com.swc.reporting.MyApp'> -->
    </head>
    <body>
        <script language='javascript' src='com.swc.reporting.MyApp.nocache.js'></script>
        <div id="wrap">
            <div id="header">
            </div>

            <div id="main"> 
                                        
            <!-- main ends here -->    
            </div>
        
            <!-- wrap ends here -->
        </div>        

        <!-- footer starts here -->        
        <div id="footer">
        </div>    
        <!-- footer ends here -->

    </body>
</html>