Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Vote Rating
    hstang is on a distinguished road


    Default [CLOSED] [2.0] ToolBar + ImageButton images misaligned in FF

    [CLOSED] [2.0] ToolBar + ImageButton images misaligned in FF


    I am currently embedding a GXT application into an existing request-based framework and I am using jQuery to hide and show the GXT application (hiding behind a div) upon start-up.

    Problem: The sprite/image-bundle appears misaligned relative to the button when I show the div. This only occurs in FF, but images appear fine in Chrome and IE (for IE, I need to use style.display hack but it works).

    GXT 2.0
    Firefox 3.5
    jQuery 1.3.2

    Here's the complete entry-point code (for the purpose of this example, produces test/test.nocache.js):
    public class Test implements EntryPoint
      final ExampleIcons icons = GWT.create(ExampleIcons.class);
      public void onModuleLoad()
        RootPanel.get("dialog").add(new BugExample());
      class BugExample extends LayoutContainer
        protected void onRender(Element parent, int index)
          super.onRender(parent, index);
          ToolBar bar = new ToolBar();
          Button start = new Button("Start", icons.add24());
          Button cancel = new Button("Cancel", icons.add16());
    The complete entry html page:
        <link rel="stylesheet" type="text/css" href="gxt/css/gxt-all.css"/>
        <!-- jQuery library -->
        <script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
        <!-- this is the compiled gxt application from above code sample -->
        <script type="text/javascript" language="javascript" src="test/test.nocache.js"></script>
        <script type="text/javascript">
            <!-- hide the dialog upon startup using jQuery -->
            $(function() {
                document.getElementById('dialog').setAttribute('style', 'display:none');
    <a id="dialog_link" href="#"
       onclick="document.getElementById('dialog').setAttribute('style', 'display:block');">Click
    me to reveal bug</a>
    <div id="dialog"></div>
    Here's how it looks

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Vote Rating
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light



    This is unfixable. If you hide something with display none, you cant determine its sizes. So you cant align anything correctly. You need to hide it via offset or with "visibility: hidden;"

    I am closing this issue.

Thread Participants: 1