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