SelectItem width/scrollbar problem

[agalvao]

SmartGWT 2.5
IE9/Chrome

Hello!

I have the following code, that adds a form with two select items.

        VLayout layout = new VLayout();
        
        DynamicForm form = new DynamicForm();
        form.setNumCols(2);
        form.setTitleOrientation(TitleOrientation.TOP);
        form.setWidth(400);
        
        SelectItem select1 = new SelectItem();
        select1.setTitle("Select 1");
        select1.setWidth(200);
        select1.setValueMap("", "Option 1", "Option 2", "Option 3");
        
        SelectItem select2 = new SelectItem();
        select2.setTitle("Select 2");
        select2.setWidth(200);
        select2.setValueMap("", "Option 1 - Very very very very long description", "Option 2 - Very very very very long description", "Option 3 - Very very very very long description");
        
        form.setFields(select1, select2);
        
        layout.addMember(form);

- When I open select 1, the width is ok. (img1)
- Then I open select 2 that, as expected, expands the options area. (img2)
- When I open for the second time select 1, the options area is the same width of select 2... (img3)

Any clue about this?
It seems to me that this is a SmartGWT bug, but I am not sure...
Anyone with the same problem?

Thanks!

[Isomorphic]

You're not loading the skin at all. You need to run a GWT compile, or your inherits in your .gwt.xml may be wrong. In the QuickStart Guide there are instructions for switching skins which may be helpful.

[agalvao]

The skin is not a problem.
My problem is the width behavior.
In my final project I have a skin applied and the width behavior is the same.

Any clue why the select width is wrong?

[Isomorphic]

Skinning is the problem. Try this with the skin enabled and with any third-party CSS removed (see FAQ).

[agalvao]

Ok, now with theme applied (Graphite).

The code:

        VLayout layout = new VLayout();
        
        DynamicForm form = new DynamicForm();
        form.setNumCols(3);
        form.setTitleOrientation(TitleOrientation.TOP);
        form.setWidth(400);
        
        SelectItem select1 = new SelectItem();
        select1.setTitle("Select 1");
        select1.setWidth(200);
        select1.setValueMap("", "Option 1", "Option 2", "Option 3");
        
        SelectItem select2 = new SelectItem();
        select2.setTitle("Select 2");
        select2.setWidth(200);
        select2.setValueMap("", "Option 1 - Medium medium medium description", "Option 2 - Medium medium medium description", "Option 3 - Medium medium medium description");
        
        SelectItem select3 = new SelectItem();
        select3.setTitle("Select 3");
        select3.setWidth(200);
        select3.setValueMap("", "Option 1 - Very very very very very very very long description", "Option 2 - Very very very very very very very long description", "Option 3 - Very very very very very very very long description");
        
        form.setFields(select1, select2, select3);
        
        layout.addMember(form);

The xml:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='gwttests'>
	<inherits name='com.google.gwt.user.User' />
	<inherits name="com.smartgwt.SmartGwt" />

	<inherits name="com.smartclient.theme.graphite.Graphite" />

	<!-- Specify the app entry point class. -->
	<entry-point class='gwt.tests.client.GWTTests' />

	<!-- Specify the paths for translatable code -->
	<source path='client' />

</module>

The Scenario:
- Expand select 1 (select 1 width is OK) - img1
- Expand select 2, then expand select 1 (select 1 width is NOT OK , it uses select 2 width) - img2 and img3
- Expand select 3, then expand select 1 and 2 (select 1 and 2 width are NOT OK , they use select 3 width) - img4 and img5

Can you help?

[agalvao]

Anyone can help?

Thanks!

[Isomorphic]

We believe this issue has been resolved since 2.5.
Try the latest nightly build from http://www.smartclient.com/builds (2.5 and 3.0 branch should not have this behavior). If you do continue to see it there, let us know.

If you need a workaround for 2.5 try specifying an explicit pickListWidth on your item (via 'setPickListWidth()').

[agalvao]

It works with the last nightly build. :)

Thanks a lot!