Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-1669 in 3.1 beta.
  1. #1
    Ext GWT Premium Member
    Join Date
    Jan 2009
    Location
    Colorado Springs, CO
    Posts
    381
    Vote Rating
    5
    DavidHoffer is on a distinguished road

      0  

    Default MenuItem icon isn't positioned correctly

    MenuItem icon isn't positioned correctly


    Using 3.0-beta4

    I notice that when I create several MenuItems and sub Menus the icons are not positioned correctly. In all cases here I'm making MenuItems with text and an ImageResource.

    Specifically if I make top level menus the icons are shifted to the right and are touching the vertical separator bar that separates the icon from the text, I would expect the icon to be centered between the edge of the menu item and that separator, at least not touching it, or perhaps the same distance the text is away from the separator on the other side.

    Also when hovering over the same menu items it seems the icon is positioned too low as its touching the bottom of the selection rectangle. I would expect the icon to be centered in this respect vertically.

    P.S. Currently is there a way I can move the icon over and position it more accurately in this version?

    -Dave

  2. #2
    Sencha User WesleyMoy's Avatar
    Join Date
    Oct 2009
    Location
    Redwood City, California
    Posts
    402
    Vote Rating
    2
    WesleyMoy is on a distinguished road

      0  

    Default


    It's difficult to picture what you're saying, and there are a few critical details that we're missing. Please consider making a small app with EntryPoint that shows off the problem and including the icons that you're using. Also, be sure to mention in which browser you're noticing this. As an alternative (or in addition), attach a few screenshots so we can see exactly what you're seeing.

  3. #3
    Ext GWT Premium Member
    Join Date
    Jan 2009
    Location
    Colorado Springs, CO
    Posts
    381
    Vote Rating
    5
    DavidHoffer is on a distinguished road

      0  

    Default


    I'm not in the office now...but will get you something tomorrow. I was using a 20 x 20 png image...testing in Firefox.

  4. #4
    Ext GWT Premium Member
    Join Date
    Jan 2009
    Location
    Colorado Springs, CO
    Posts
    381
    Vote Rating
    5
    DavidHoffer is on a distinguished road

      0  

    Default


    The following menu demonstrates the problems. In all cases the icon is too far to the right and too low as well.

    Code:
    Menu menu = new Menu();
    IImageResourcesTest resources = GWT.create(IImageResourcesTest.class);
    menu.add(constructMenuItem("Testing MenuItem1", resources.available_20(), null));
    menu.add(constructMenuItem("Testing MenuItem2", resources.away_20(), null));
    menu.add(constructMenuItem("Testing MenuItem3", resources.extendedaway_20(), null));
    menu.add(constructMenuItem("Testing MenuItem4", resources.busy_20(), null));
    menu.add(new SeparatorMenuItem());
    menu.add(constructMenuItem("Testing MenuItem1", resources.available_20(), null));
    
    public interface IImageResourcesTest extends ClientBundle {
    
        @Source("available_20.png")
        ImageResource available_20();
    
        @Source("away_20.png")
        ImageResource away_20();
    
        @Source("extendedaway_20.png")
        ImageResource extendedaway_20();
    
        @Source("busy_20.png")
        ImageResource busy_20();
    }
    Attached Images

  5. #5
    Ext GWT Premium Member
    Join Date
    Jan 2009
    Location
    Colorado Springs, CO
    Posts
    381
    Vote Rating
    5
    DavidHoffer is on a distinguished road

      0  

    Default


    I tried it with Chrome & IE on Windows...looks the same.

  6. #6
    Sencha User WesleyMoy's Avatar
    Join Date
    Oct 2009
    Location
    Redwood City, California
    Posts
    402
    Vote Rating
    2
    WesleyMoy is on a distinguished road

      0  

    Default


    Thanks for the example code. At the moment, the menu seems to expect a 16x16 icon. I'll file a bug against the team to investigate basing the size of the gutter and the menu items on the size of the icon. As a workaround, you will probably be able to modify the current menu appearance (specifically the CSS) to accomodate your icons.

    I'll update this thread with any developments.

  7. #7
    Ext GWT Premium Member
    Join Date
    Jan 2009
    Location
    Colorado Springs, CO
    Posts
    381
    Vote Rating
    5
    DavidHoffer is on a distinguished road

      0  

    Default


    Yes, I can confirm that using 16x16 pixel icons makes things look much better.

    So it seems at a minimum you should document in all method javadocs that you are expecting 16x16 sized images, there is simply no way that someone is going to know this otherwise. Also it would be good if in the javadocs or someplace you show an example of how one can use CSS to correct the layout if the images are something other than 16x16, I tried to do this but could not find a way to make anything work.

    In my current use case I will see if I can change my icons to be 16 x 16 now that I know that's the expected size.

    -Dave

  8. #8
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Through the themebuilder introduced in 3.1, the menu size can be controlled via the text size and the padding, so larger icons can be accommodated.

Thread Participants: 2