Order of buttons drawn not matching code order

Question

As you can see in the image Diffuse Color and Alpha are drawn before the material selector. But in the code the material selector is before Diffuse Color and Alpha.

What is the reason for that?

    if obj and obj.active_material:
        mat = obj.active_material

        if mat:
            layout.template_ID(obj, "active_material", new="material.new")
            row.prop(mat, "diffuse_color")
            row.prop(mat, "alpha")
        else:
            row.label('no active_material')
    else:
        layout.template_ID(obj, "active_material", new="material.new")

I actually like the result because after I add the material the added material options are drawn below the object options.

Answer 1

def draw(self, context):
    layout = self.layout

    obj = context.active_object

    if obj and obj.active_material:
        mat = obj.active_material
        if mat:
            layout.template_ID(obj, "active_material", new="material.new")
            row = layout.row()
            row.prop(mat, "diffuse_color")
            row.prop(mat, "alpha")
        else:
            row = layout.row()
            row.label('no active_material')
    else:
        layout.template_ID(obj, "active_material", new="material.new")

Sometimes you have to be a bit more accurate about where a row should be generated. In your case the row is declared ahead of the template_ID, so any further additions to row will be added to that location.

---

The take-away here is that the line number of the UI elements like props and operators is less important than the line numbers on which the layout elements like row, col and box are first instanced. As with all good programming, variable names are important because they allow you to organize your thoughts.

While this is possible, it's asking for confusion:

def draw(self, context):
    layout = self.layout

    obj = context.object

    row1 = layout.row()
    row2 = layout.row()
    row3 = layout.row()

    # will display at the bottom
    row3.operator("mesh.primitive_cube_add")

    # will display in the middle
    row2.label(text="Active object is: " + obj.name)

    # will display on top
    row1.label(text="Hello world!", icon='WORLD_DATA')

The UI cookbook shows a worthwhile convention to follow, use extra identifiable postfixing for layout element names, row1, row2, row3 . etc. While reusing the variable row over and over again is handy, it tends to cause unnecessary confusion with more complex UI definitions.