PDA

View Full Version : [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):


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:


<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
http://img145.imageshack.us/img145/1600/misailgned.jpg

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.