# Order of buttons drawn not matching code order

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.

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

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.