MenuItem Misalignment

[jasonharberg]

I just updated to EXT GWT 2.3.1 and noticed my menu items are misaligned. I usually have icon's beside each menu item in the menu and now the text seems to be underneath. Also only the first icon in the menu seems to be showing and the rest are hidden. I inspected the HTML and here is what I noticed:

Tested in Firefox 24 & Chrome 30

Before
<div id="x-auto-1837" class=" x-ignore x-menu x-component" style="position: absolute; z-index: 1019; width: 118px; left: 1091px; top: 66px; display: block;" tabindex="0" hidefocus="true">
<div class=" x-menu-list" style="height: 72px;">
<div id="x-menu-el-x-auto-1838" class="x-menu-list-item ">
<a id="x-auto-1838" class=" x-menu-item x-component" href="#CompanyListPlace:CONTRACTORS">
Contractors
<img class=" x-menu-item-icon" border="0"
style="width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB2klEQVR42q2TW0sbURSF/W/9B8UKRa0P+lB8sCBqIdQgEoyNqYoRjdqo8UYNMaa2QUhqNCZmHKPRmIr3W7xlZoy5GIxaZPWcU81kigULblgcZrPPt9few8nLe44Ymo2rBzzxo76ZGExuCd0/JHQ4BRgmz9DqOIV+4hiN4xForAeoG91F7fAOVINbC1mA2XMhpTO/8D+q6l+/zgJ6p89ZcnjtM8xhI0wr7TAGW2EINKGZ1+Kjvx4arxp1HhU+uGtY7buen8gCeqYklnxq0NryzpAMMJJ5aXLEKzxJtLbMEJQB7WRZDwAao76ooqOVU35LyQxKWgIyoOX7CVJXt7D4BVipOBFjnAAbL8DOCwxAT/t8FI7FKPbOUnitm5cB+q9HSBKAjRdZB/v9+S8H2ydJvGrwywCt7RCJ9C0mAiK+LSo1GRQZgLkgDmxEG5EE8ht8MqDeso/45Q0rpuFakRQdncsiGVH+SxRQ8ilnBPWXXQZwkouuvzQVkuBYEhWigCJdzgiqoU1cEIB79U/n6bDSwRin3AlzoM8BVJvXEUtdQ0xkcBq7QkRMk01fYvs4yYofU7Fu7i4LqDSt+Sq6wum3HSGUtgXxpjmAQh2PAi2Hlxrvo3rx3mV/lpf8G3hGohYjxMsKAAAAAElFTkSuQmCC) no-repeat 0px 0px;" src="http://mysite/csmapp/clear.cache.gif" onload="this.__gwtLastUnhandledEvent="load";"></img>
</a>
</div>


After
<div id="x-auto-223" class=" x-ignore x-menu x-component " style="z-index: 1017; width: 118px; display: block; position: absolute; left: 1093px; top: 66px;" tabindex="0" hidefocus="true">
<div class=" x-menu-list" style="height: 51px;">
<div id="x-menu-el-x-auto-224" class="x-menu-list-item ">
<span id="x-auto-224" class=" x-menu-item x-unselectable x-component" unselectable="on">
Contractors
<img class=" x-menu-item-icon" border="0" style="width:16.0px;height:16.0px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB20lEQVR42q2T7UtaYRjG+9f2L0QbRGt92D7EPhRj1FhsEiFaZi9klFszsa1Roc4sCbTM0Hk6WS57oUVrbfbmOWeab6gVcfU8z8rjCYOCbrh4ODf387uv+z48FRUPESO+E9WIL7Fv9sVh8kr4OCthwC3AMHOMXtcR9M4DtH+LQm39g9bxXbwf/YW3n7eXigCLLyFl8+e4j16btwpFwPD8P5Yc3fwEy7oRptV+GMO9MIQ60c1r0RFsg9qvQutCC955m1lt49AGioChOYkl7xq09uVgRAYYybw0+dUv3Em09oUhLAP6ybKuATTGAzFFRyun/JZSedT1hGRAz/Qh0rkzTAQFWKk4ETZOgJ0X4OAFBqCnYzEG13IMv4/TqNYtygD95D5SBGDnRdbBcXXe5mDnMIXHmqAM0Nr/Ipk9gzMkYmpZqZmwyADMBXFgJ/oZTaJKE5ABbRN7OMmcsmIanlVJ0dH9QyQjyn+JAuq6SkZQje0ygJtc9NzQXESCa0VUiAKe6kpGaPmyjQQBeNf+d55fVzqwccqdMAf6EkCTZQvxdAFiMo+jeA5RMUs2ncHOQYoVl1Ntx/eLIuCVaTPQ8GEtWz8QwfO+MJ51h1Cj4/FEy6FS7S+rR288jgd5yZdOLaIGt1R0qQAAAABJRU5ErkJggg==) no-repeat 0px 0px;" src="http://mysite/csmapp/clear.cache.gif" onload="this.__gwtLastUnhandledEvent="load";"></img>
</span>
</div>

Example Menu Item
MenuItem addItemButton = new MenuItem("Manually Add Item");
addItemButton.setIcon(AbstractImagePrototype.create(CSMApp.ICONS.add()));
addItemButton.addSelectionListener(new SelectionListener<MenuEvent>() {

@Override
public void componentSelected(MenuEvent ce) {
presenter.onAddNewWorkorderItem(itemGrid.getSelectionModel().getSelectedItem());
}
});
newItemMenu.add(addItemButton);

[flyingbo]

Hello,

i have the same problem.

My fix:
Overwrite the onRender()-Method in com.extjs.gxt.ui.client.widget.menu.MenuItem.java and change
setElement(DOM.createSpan(), target, index);
to
setElement(DOM.createAnchor(), target, index);

Maybe the GXT-Team can fix this in the next version?!

Best wishes
Christian

[flyingbo]

That´s the problem:
http://www.sencha.com/forum/showthre...plays-properly.

[branflake2267]

Thanks for the report! I have opened a bug in our bug tracker.

[branflake2267]

Can you check to see if the gxt-all.css has been updated, copy it from the release into the source as well? Would copying the new release css and update it into the project change the result of the alignment?

Could an example be provided, test case to be sure we are on the same configuration page?

Brandon

[branflake2267]

I've closed the issue as it look like the gxt-all.css hasn't been updated. Please let me know if updating the css. If it doesn't work for you updating, let me know and I can reopen the issue. Be sure to make sure the old css is not cached when testing. Thanks,Brandon

[R-Zer0]

I've closed the issue as it look like the gxt-all.css hasn't been updated. Please let me know if updating the css. If it doesn't work for you updating, let me know and I can reopen the issue. Be sure to make sure the old css is not cached when testing. Thanks,Brandon

HI. I have the same issue. Should I replace gxt-all.css? Does it works. Now clear for me what solution helps.