Question

I’m using Dojo GFX to do some simple drawing, but having a problem with IE 7/8 (switching browsers is not an option).

If I create a div, set up a surface and draw some rects, they draw correctly relative to the div, so far so good.

However, what I want to do is create a widget, something with an embedded ‘surface’ that draws based on some widget-specific data. As such, I have a widget that contains a div, and I draw into this div. When I do that, the rects I create behave as if they are responding to a float:right, appearing in order they are created and ignoring the ‘x’ parameter.

I assume that this behaviour is something to do with CSS, but I haven’t got to the bottom of it yet. Any ideas or solutions gratefully appreciated!

---

Updates:

• I’ve disabled all stylesheets and I am not using style attributes. No difference to the behaviour.
• I’ve inspected the markup that gets generated using IE8 dev tools. Apart from the different location of the containing div, the only difference I can see is that the v:roundrect elements have no child elements when created against the widget div, but they do have empty elements like stroke when created against the div referenced by ID.
• Reading back through the docs, a difference I can see that might be responsible is that the postCreate method where I am doing my drawing is manipulating a div that has not been added to the dom yet, whereas drawing on a hardcoded div is done when it does exist. Maybe the difference in rendering is something to do with this? Is there a specific lifecycle function which is appropriate to draw in for widgets?

Answer 1

It seems that if you are going to use Dojo GFX and draw on DOM elements that are created as part of a widget in IE7/8, you must actually do the drawing in an override of the startup() method.

Drawing in the postCreate() method causes incorrect rendering resembling a float: left.