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
    Posts
    22
    Vote Rating
    0
    hstang is on a distinguished road

      0  

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

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


    Hi,

    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).

    Environment:
    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):
    Code:
    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
      {
        @Override
        protected void onRender(Element parent, int index)
        {
          super.onRender(parent, index);
          ToolBar bar = new ToolBar();
          Button start = new Button("Start", icons.add24());
          bar.add(start);
          Button cancel = new Button("Cancel", icons.add16());
          bar.add(cancel);
          add(bar);
        }
      }
    }
    The complete entry html page:
    Code:
    <html>
    <head>
        <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');
            });
        </script>
    </head>
    <body>
    
    <a id="dialog_link" href="#"
       onclick="document.getElementById('dialog').setAttribute('style', 'display:block');">Click
    me to reveal bug</a>
    
    <div id="dialog"></div>
    </body>
    </html>
    Here's how it looks

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    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

      0  

    Default


    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