Icon not rendered correctly in IMenuButton (SmartGWT)

[jason.zheng]

Be sure your post includes:

1. browser(s) and version(s) involved

Latest version of Firefox and Chrome

2. sample code if applicable

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.menu.IMenuButton;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuItem;

public class Test1 implements EntryPoint {

    private static final int MENU_ICON_SIZE = 50;

    public void onModuleLoad() {

        // HLayout buttonLayout = new HLayout();
        //
        // IconButton printButton = new IconButton("");
        // printButton.setIcon("icons/16/print.png");
        // printButton.setIconSize(MENU_ICON_SIZE);

        Menu menu = new Menu();
        menu.setShowShadow(true);
        menu.setShadowDepth(10);

        MenuItem csvExport = new MenuItem("Export as CSV",
                "icons/16/csv_file.png");
        MenuItem pdfExport = new MenuItem("Export as PDF",
                "icons/16/pdf_file.png");
        MenuItem xmlExport = new MenuItem("Export as XML",
                "icons/16/xml_file.png");
        MenuItem jsonExport = new MenuItem("Export as JSON",
                "icons/16/json_file.png");

        csvExport.setIconWidth(MENU_ICON_SIZE);
        pdfExport.setIconWidth(MENU_ICON_SIZE);
        xmlExport.setIconWidth(MENU_ICON_SIZE);
        jsonExport.setIconWidth(MENU_ICON_SIZE);

        csvExport.setIconHeight(MENU_ICON_SIZE);
        pdfExport.setIconHeight(MENU_ICON_SIZE);
        xmlExport.setIconHeight(MENU_ICON_SIZE);
        jsonExport.setIconHeight(MENU_ICON_SIZE);

        menu.setItems(csvExport, pdfExport, xmlExport, jsonExport);

        IMenuButton exportButton = new IMenuButton("", menu);
        exportButton.setIcon("icons/16/download.png");
        exportButton.setIconSize(MENU_ICON_SIZE);

        // buttonLayout.setMembers(printButton, exportButton);
        //
        // RootPanel.get().add(buttonLayout);

        RootPanel.get().add(exportButton);
    }
}

The icon is not showing, what I can see is only the little triangular for menu dropdown. The same problem is for MenuButton as well.

However, if I switch from IMenuButton to IconMenuButton, the icon can be showing correctly, but the problem is the user have to click the little triangular to view the menu, instead of the entire button, which is not quite user-friendly to me.

Anyone have ideas about this?

Any comment or suggestion will be appreciated.

[Isomorphic]

Depending on the skin, IMenuButton may be either IconMenuButton or just MenuButton. In the latter case it does not support a separate icon and the icon would have to be included as an <img> tag inside the title.

If you don't want to look into the skin or changing skin, just using IconMenuButton is fine.

[jason.zheng]

Depending on the skin, IMenuButton may be either IconMenuButton or just MenuButton. In the latter case it does not support a separate icon and the icon would have to be included as an <img> tag inside the title.

If you don't want to look into the skin or changing skin, just using IconMenuButton is fine.

Thanks. Using a <img> tag did fix the problem. Right now I am not much care about the theme.

[amcculley]

I just came to post the exact same post but I have some issues with IMenuButton in general.

It doesn't really seem to behave or look the same as IButtons, which is what I would expect. For example, it isn't rounded and it doesn't support the inclusion and display of an icon.

I'm using the <img> tag as a work around as well, but I would think the default skins should make an attempt to get the IMenuButton to look / behave the same as IButton just as MenuButton should probably look / behave similar to Button.

Just my 2 cents.

[Isomorphic]

Don't leave us in suspense - what skin are you using??

Note you might be seeing an effect of loading two skins - see the QuickStart Guide for the correct way to change skin.

[amcculley]

Sorry.

Power 3.1d (from the 12th I believe)

Graphite skin.

*edit*
It also seems the text justification is different (centered vs. left).

[Isomorphic]

Sorry, upon review, it's intended that MenuButtons default to square because they are most often used in MenuBars, where they should not be rounded.

You can use skin settings (styleName / src depending on skin) to use the same settings as are used for IButton if you want them rounded due to being standalone.

However it's seems to us that it might be better for the button to be squared out as an additional visual cue that it's a menu and not a normal button.

[amcculley]

Well, I'll just have to respectfully disagree.

A MenuButton, in my opinion, should have the option of being stand alone. Afterall, Buttons can exist in MenuBars, DynamicForms, ToolStrips, Ribbons, and StandAlone - why would this button be any different? It is still a button but just a different kind of button.

As such, I'd expect a similar set of functionality - specifying justification, icon, alignment, etc.

To single out this type of button from all others just seems out of place to my personally. Again, this isn't a huge deal for us - I'll make the changes but it definitely feels inconsistent and out of place. When so much of the API is flexible and consistent (with regards to the API, look and feel, etc) - to have this be different just feels off to me.

[Isomorphic]

Seems like there must be some misunderstanding, we're saying:

1. you can use a MenuButton standalone

2. we think it's a good thing that a standalone MenuButton is square by default, so it stands out.

3. it has sufficient skinning options that you can make it look more like a normal Button if you like