Hi
I have problem with CanvasItem at Internet Explorer 9. Content (Canvas) of CanvasItem is placed in wrong position (attachment). In Firefox, IE7 and IE8 everything works fine.
This problem occures when using html doctype 4.01. I know that You recommend to use Quirks Mode but my application is part of large project so doctype setting has to stay as it is.
That problem doesn't occure in development mode when - using developer tools of IE9 document type is changed to IE7.
For test i used
SmartGWT nightly build 3.1d LGPL 2012-06-11
GWT 2.5.2
I've prepared sample code that presents my problem.
Rectangle with red background (Canvas element) which is content of CanvasItem (set by CanvasItem.setCanvas(Canvas canvas)) is placed a little lower than it should be - see attachments (firefox displays it properly and ie9 doesn't)
HTML
JAVA
Hope that you can help me solve it somehow...
I have problem with CanvasItem at Internet Explorer 9. Content (Canvas) of CanvasItem is placed in wrong position (attachment). In Firefox, IE7 and IE8 everything works fine.
This problem occures when using html doctype 4.01. I know that You recommend to use Quirks Mode but my application is part of large project so doctype setting has to stay as it is.
That problem doesn't occure in development mode when - using developer tools of IE9 document type is changed to IE7.
For test i used
SmartGWT nightly build 3.1d LGPL 2012-06-11
GWT 2.5.2
I've prepared sample code that presents my problem.
Rectangle with red background (Canvas element) which is content of CanvasItem (set by CanvasItem.setCanvas(Canvas canvas)) is placed a little lower than it should be - see attachments (firefox displays it properly and ie9 doesn't)
HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>TEST</title>
<script type="text/javascript" language="javascript" src="dynamicformtest/dynamicformtest.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
Code:
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.CanvasItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.google.gwt.core.client.EntryPoint;
public class DynamicFormTest implements EntryPoint {
public void onModuleLoad() {
Canvas rootPanel = new Canvas();
DynamicForm form = new DynamicForm();
form.setWidth(300);
form.setHeight(200);
CanvasItem item = new CanvasItem();
item.setHeight(22);
Canvas canvas = new Canvas();
canvas.setBackgroundColor("red");
item.setCanvas(canvas);
SelectItem selectItem = new SelectItem();
form.setFields(item, selectItem);
rootPanel.addChild(form);
rootPanel.draw();
rootPanel.setLeft(20);
rootPanel.setTop(20);
}
}
Hope that you can help me solve it somehow...
Attached Files
Comment