Cannot get setHoverWidth() to work on ListGrid even on Showcase example

[deepfriedbrain]

SmartGWT: version 2.3
Browser: IE 7, Firefox 3.6.x

Hi,

Following the showcase example (on Hover), I'm trying to set the hover width to 250px on a list grid column. Somehow, I can't get it to work. The list field still shows a hover of 100px. I'm using the default Enterprise skin without any customization to it.

Here's my code snippet. It's literally copied from the showcase, with the only addition of setWidth100() and setHeight100() on the canvas.

    public void onModuleLoad() {  
  
        Canvas canvas = new Canvas();  
        canvas.setWidth100();
        canvas.setHeight100();
        ListGrid grid = new ListGrid();  
        grid.setWidth("80%");  
        grid.setHeight(84);  
        grid.setLeaveScrollbarGap(false);  
        grid.setHoverWidth(300);  
  
        ListGridField commonNameField = new ListGridField("commonName", "Animal");  
        commonNameField.setHidden(true);  
  
        ListGridField sceintificField = new ListGridField("scientificName", "Scientific Name");  
        ListGridField dietField = new ListGridField("diet", "Diet");  
        ListGridField informationField = new ListGridField("information", "Interesting Facts");  
        informationField.setShowHover(true);  
  
        grid.setFields(commonNameField, sceintificField, dietField, informationField);  
  
        grid.setData(new AnimalRecord[]{  
                new AnimalRecord("Platypus", "Ornithorhynchus Anatinus", "Insects and Larvae", "Were thought to be a hoax when first discovered. The male has a venemous spur on his hind legs.  Capable of many vocalizations including sounds like a growling puppy and a brooding hen."),  
                new AnimalRecord("Elephant (African)", "Loxodonta africana", "Herbivore", "The African Elephant is the largest of all land animals and also has the biggest brain of any land animal. Both males and females have ivory tusks. Elephants are also wonderful swimmers. Man is the only real enemy of the elephant. Man threatens the elephant by killing it for its tusks and by destroying its habitat."),  
                new AnimalRecord("Alligator (American)", "Allligator mississippiensis", "Carnivore", "In the 16th century, Spanish explorers in what is now Florida encountered a large formidable animal which they called \"el largo\" meaning \"the lizard\". The name \"el largo\" gradually became pronounced \"alligator\".")  
        });  
        canvas.addChild(grid);  
  
        IButton button = new IButton("Close Issue");  
        button.setDisabled(true);  
        button.setTop(150);  
        button.setPrompt("You cannot close this issue - see the owner");  
        button.setHoverWidth(150);  
        canvas.addChild(button);  
  
        Img img = new Img("other/eyes.jpg", 90, 47);  
        img.setLeft(180);  
        img.setTop(100);  
        img.setPrompt("360px by 188px<BR>25k<BR>JPEG high quality");  
        img.setHoverWidth(120);  
        img.setHoverOpacity(75);  
        img.setHoverStyle("interactImageHover");  
        canvas.addChild(img);  
  
        DynamicForm form = new DynamicForm();  
        form.setLeft(220);  
        form.setTop(190);  
        form.setWidth(200);  
        form.setItemHoverWidth(200);  
        form.setItemHoverStyle("interactFormHover");  
  
        StaticTextItem severityField = new StaticTextItem();  
        severityField.setName("severityLevel");  
        severityField.setTitle("Severity Level");  
        severityField.setDefaultValue("Severity 2");  
        severityField.setPrompt("<b>Severity 1</b> - Critical problem<br>System is unavailable in production or " +  
                "is corrupting data, and the error severely impacts the user's operations." +  
                "<br><br><b>Severity 2</b> - Major problem<br>An important function of the system " +  
                "is not available in production, and the user's operations are restricted." +  
                "<br><br><b>Severity 3</b> - Minor problem<br>Inability to use a function of the " +  
                "system occurs, but it does not seriously affect the user's operations.");  
  
        form.setFields(severityField);  
        canvas.addChild(form);  
  
        canvas.draw();  
    }  
  
    class AnimalRecord extends ListGridRecord {  
  
        public AnimalRecord(String commonName, String scientificName, String diet, String information) {  
            setCommonName(commonName);  
            setScientificName(scientificName);  
            setDiet(diet);  
            setInformation(information);  
        }  
  
        public void setCommonName(String commonName) {  
            setAttribute("commonName", commonName);  
        }  
  
        public void setScientificName(String scientificName) {  
            setAttribute("scientificName", scientificName);  
        }  
  
        public void setDiet(String diet) {  
            setAttribute("diet", diet);  
        }  
  
        public void setInformation(String information) {  
            setAttribute("information", information);  
        }  
    }

Using firebug, I figured that the hover class is gridHover. I even tried to set the width on the gridHover class, but it doesn't work. It will apply the font size and border settings (2px - just for testing), but the width won't change.

.gridHover {
    width: 250px;
    font-size: 12px;
    border: 2px solid black;
}

Refer to the attached screenshot.

What could I be doing wrong?

I'll appreciate any help on this.

Thanks.

[deepfriedbrain]

This is the generated HTML (from my real application):

<div onscroll="return isc_Label_11.$lh()" style="position: absolute; left: 0px; top: -1000px; width: 100px; height: 140px; z-index: 800180; -moz-box-sizing: border-box; overflow: hidden; visibility: hidden; cursor: default;" eventproxy="isc_Label_11" id="isc_79">
  <div style="position: relative; visibility: inherit; z-index: 800180; cursor: default;" eventproxy="isc_Label_11" id="isc_7A">
    <table width="100" height="1" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td valign="top" align="left" class="gridHover">My really long hover text goes here.
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

The 100px width on the div seems to be controlling the width. I'm simply following the showcase example, and the setHoverWidth() API doesn't seem to be working.

Any pointers?

Thanks.

[deepfriedbrain]

I think it was a problem in the nightly build (10-07-2010), which I was using. I upgraded to the latest night build (11-24-2010) and it's working fine now.