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

**hstang** · 16 Jul 2009 10:20 AM

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

**sven** · 16 Jul 2009 10:24 AM

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.

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

Thread Tools

Search Thread

Display

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

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