Region property undetected in nested BorderContainer ContentPane widgets

Question

I'm working on creating a basic to-do list app using Dojo 1.9. I have a simple mockup of what I'd like an individual task to look like which can be seen in this jsfiddle. I've tried to implement this in my to-do list, in the addTask function for this jsfiddle.

Essentially, I have the following layout:

BorderContainer
    BorderContainer (top)
        Button (right)
    ContentPane (center)
        BorderContainer (task0)
            ContentPane (left)
                CheckBox
            ContentPane (center)
                InlineEditBox
            ContentPane (right)
                Button
        BorderContainer (task1)
            ...
        ...

and the BorderContainer widgets for the tasks (task0, task1, ...) are not formatting their children ContentPane widgets correctly -- inspection in Firebug shows that the dijitAlign* properties are not being set. Why is this? I'm calling startup on complete, and inspection of the DOM clearly shows that all children are being nested appropriately.

Answer 1

You're not calling resize on your task container after you start it up. Because it's being placed into another BorderContainer, it needs to explicitly be resized in order to properly fit itself. You can also set explicit sizes on the BorderContainer and the html and body elements, but this isn't always ideal. It's still a good idea to explicitly resize after placing inside another BorderContainer. See the note in the middle of this section of the documentation on sizing LayoutContainer.