Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2011
    Posts
    4
    Vote Rating
    0
    jasonharberg is on a distinguished road

      0  

    Default MenuItem Misalignment

    MenuItem Misalignment


    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);
    Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    16
    Vote Rating
    0
    flyingbo is on a distinguished road

      0  

    Default Fix

    Fix


    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

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    16
    Vote Rating
    0
    flyingbo is on a distinguished road

      0  

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    404
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


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

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    404
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    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

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    404
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    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

Thread Participants: 2

Tags for this Thread