How to set width of ToolstripButton

[ngodilo]

Version: SmartClient Version: 8.2/LGPL Development Only (built 2011-12-05)

Browser: Safari on ipad

I’m having trouble setting the width of ToolStripButtons. I’m developing a SmartGWT application with the iPad as a target platform. Apple recommends toolbar buttons have a hit target area of at least 44x44 pixels, with icons about 20x20 pixels. I have icons that are 24x24 and I’m trying to create a toolbar using these icons for buttons, but with a hit target area of 44 pixels, so I’m trying to set the height and width of the buttons to 44 pixels. Unfortunately, I’m having little success setting the width of ToolStripButtons. Calling setWidth() with an integer parameter to indicate the number of pixels has no effect whatsoever. Calling setWidth() with a string parameter of the form “x%” always seems to set the width of the button to some large size, regardless of the value of x. Calling setHeight() with an integer parameter indicating the number of pixels works perfectly. Is there some trick to the setWidth method? Here is some sample code:

private static final int iconWidth = 24;
private static final int iconHeight = 24;
private static final int buttonHeight = 44;
private static final int buttonWidth = 44;

ToolStrip toolStrip = new ToolStrip();
toolStrip.setWidth100();
toolStrip.setBackgroundColor("#D8D8D8");

ToolStripButton moreOptionsButton = new ToolStripButton();
moreOptionsButton.setIcon("icons/24/moreoptions.png");
moreOptionsButton.setIconHeight(iconHeight);
moreOptionsButton.setIconWidth(iconWidth);

// Setting overflow to HIDDEN has no effect on the result when calling setWidth
moreOptionsButton.setOverflow(Overflow.HIDDEN);

moreOptionsButton.setHeight(buttonHeight); // this works nicely for setting the height

moreOptionsButton.setWidth(buttonWidth); // this has no effect regardless of the value of buttonWidth

// I tried to set the width to 44 pixels by calculating what % 44 pixels is of the visible width of the toolbar;
// regardless of the percent value specified, the button is expanded to its maximum possible size, squeezing any other
// buttons that come after it all the way to the right.
//float buttonSizePercent = ( float )buttonWidth / toolStrip.getVisibleWidth();
//moreOptionsButton.setWidth( String.valueOf(buttonSizePercent * 100) + "%" );

// more buttons added here…

toolStrip.addButton(moreOptionsButton);
toolStrip.draw();


In my real code, the toolstrip is in a VLayout, which is in turn in an HLayout; but the problem occurs regardless of any enclosing objects (e.g. cutting and pasting the sample code I provided into an onModuleLoad routine should demonstrate the problem; you’ll just need an icon file to substitute for ‘moreoptions.png’). Could someone shed some light on the proper way to set the width of ToolStripButtons? I get the same results in IE6 (I know it’s ancient) and Firefox 19.0.2.

I’m using the mobile theme in my gwt.xml file:

<inherits name="com.smartgwt.SmartGwtNoTheme" />
<inherits name="com.smartclient.theme.mobile.Mobile" />

Thanks in advance for any help.

[Isomorphic]

Use the Watch tab of the Developer Console to look at the width. What you're probably seeing is that the width setting is working, but because the button is centered in the ToolStrip it looks like it's just as big as the ToolStrip.

Stick a LayoutSpacer into the ToolStrip to soak up the extra room if you want to see the buttons all end up left-aligned (or set layout.align).

[ngodilo]

Hi, I've analyzed the setWidth problem a bit further using the developer console. It's not the case that the width is properly set, but that the button is centered. The width is not being properly set; the developer console shows that after calling setWidth(44), the width remains 24 (which is the width of the icon in the button). After calling setWidth with a string percent value (e.g. setWidth("3%")), the width is always set to 1031 regardless of the percent value specified (not sure how it comes up with that number - it seems to be the remaining space not taken up by other buttons, but I can't get the math to work).

If you look at the attached screen shot of the dev console, you'll see that the toolStrip is 1289 wide. The first thing in the toolstrip is isc_Canvas_0, which I believe is a spacer I inserted. Then comes a button with a name ending in Type_0 - that's the one where I tried setting the width using setWidth("3%") - it's width is 1031 when it should be 39 (3% of 1289, rounded). Following are 8 buttons whose widths I tried setting using setWidth(44) - they all have width 24.

I can make things look better using toolStrip.addSpacer(), but it would make my life easier if the setWidth call worked as expected.

Again, thanks in advance for any help you can provide.

[Isomorphic]

This sounds like bizarre behavior and it's not immediately obvious what would cause it.

Can you test whether this still occurs if you use the latest nightly build from the 3.1p branch? If so please see if you can distill down a simple entryPoint class that demonstrates the problem - basically something very simple that defines the components and draws them only, which we can then run on our end to see the problem in action.

Thanks
Isomorphic Software

[ngodilo]

Hi, I've retried using smartgwt-3.1p, with the same results. I created a small test program to demonstrate the problem, and I'm including the following files that should allow you to reproduce it:

1. TestProject.java
2. TestProject.gwt.xml
3. TestProject.html
4. TestProject.css

The source code tries to set the button width to the integer 44, without success (you can see by hovering the cursor over the button that the width is smaller than the height, which was successfully set to 44 – they should have the same dimensions). Commented out is code that sets the width to "3%" - if you uncomment that line and comment out the line that sets the width to the integer 44, you'll see that the button takes up the entire width of the toolbar, instead of 3% of it.

Note: For some reason, attempting to launch the developer's console is failing for this test program - I get the following warning:

[WARN] 404 - GET /testproject/sc/system/helpers/Log.html (127.0.0.1) 1424 bytes

I don't have this 404 problem in my "real" application, but I'm getting the same problem with setting the width, so I assume the 404 problem is unrelated.

Thanks.