How to get Enumerations correctly right aligned

Question

I try to create a box with 3 EnumProperty elements. When i just create the items in a box like here:

box = layout.box()
box.label("Add new Avastar")
col = box.column()
col.operator("add_avatar", text="Create")

col = box.column(align=True)
col.prop(self, "mesh_type",   text='Character Mesh')
col.prop(self, "rig_type",    text='Rig Type')
col.prop(self, "weight_type", text='Weight Variant')

Then i get this result:

So i see how the selection menus are a bit too wide and because of this the text label to the left side gets truncated. However there is a lot of free space to the right side of the button labels. So i first checked if maybe one of the option texts is too wide, but that is not the case.

Here are the text labels for all options involved in this example:

character type: [ Rig only | with Tris | with Quads ]
mesh_type:      [ Classic  | Extended ]
rig_type :      [ Classic  | Extended ]

Next i thought maybe i can get an improvement when i use the alignment property as follows:

box = layout.box()
box.label("Add new Avastar")
col = box.column()
col.operator("add_avatar", text="Create")

col = box.column(align=True)

col.alignment='RIGHT'         # <== See Here!

col.prop(self, "mesh_type",   text='Character Mesh')
col.prop(self, "rig_type",    text='Rig Type')
col.prop(self, "weight_type", text='Weight Variant')

But this gives me following result:

Next i tested what happens when i replace 'RIGHT' with 'LEFT' in the alignment. But that does not change anything, the alignment looks the same for 'LEFT' and 'RIGHT'.

So what is the trick to get the selectors all aligned to the right edge of the button?

Here is what i hope to achieve (mocked up with my 2D image editor):

How can i create this (or at least something similar)?

Here is a Blend file with an example script:

http://pasteall.org/blend/40501

score 3 · Answer 1 · answered Feb 06 '16 at 10:27

You can use layout.split() to split a row into two columns based on percentage. The first item on the row uses the percentage of the width specified in the split, then the following items use the remaining width.

Then by adding the label as a separate item to the menu you get each in their own column.

class testPanel(bpy.types.Panel):
    bl_label = "Test Panel"
    bl_idname = "OBJECT_PT_tester"
    bl_space_type = 'VIEW_3D'
    bl_region_type = 'UI'

    def draw(self, context):
        layout = self.layout
        obj = context.object
        box = layout.box()

        col = box.column()
        title_size = 0.6

        row = col.split(percentage=title_size, align=True)
        row.label(text='Character Mesh')
        row.prop(obj, "mesh_type",   text='')

        row = col.split(percentage=title_size, align=True)
        row.label(text='Rig Type')
        row.prop(obj, "rig_type",    text='')

        row = col.split(percentage=title_size, align=True)
        row.label(text='Weight Variant')
        row.prop(obj, "weight_type", text='')

I was about to write the same :P At a first glance it looks a bit 'hacky' thru the extra label lines, but really seems be the only way to align this, since there is no option to shift the enum text... — p2or, Feb 06 '16 at 10:38

Gaia Clary · Answer 2 · 2016-02-06T17:38:01.573

I did not want to use Split and labels because its such an ugly workaround. But then Scorpion81 has shown me a trick how i can fetch the Property name from the EnumProperty without need to retype it into the label. Here is how i finally got it to work:

#Note: MeshProp is defined as:
#
# class MeshProp(bpy.types.PropertyGroup):
# ...
# bpy.types.Scene.MeshProp = PointerProperty(type = MeshProp)

class testPanel(bpy.types.Panel):
    bl_label = "Test Panel"
    bl_idname = "OBJECT_PT_tester"
    bl_space_type = 'VIEW_3D'
    bl_region_type = 'UI'

    def draw(self, context):
        props = context.scene.MeshProp

        box = layout.box()
        col = box.column(align=True)

        row = col.row(align=True)
        row.label(MeshProp.meshType[1]['name']) #<== Scorpion81
        row.prop(props, "meshType",   text='')

        row = col.row(align=True)
        row.label(MeshProp.rigType[1]['name'])
        row.prop(props, "rigType",   text='')

        row = col.row(align=True)
        row.label(MeshProp.weightType[1]['name'])
        row.prop(props, "weightType", text='')

Here is how it looks:

How to get Enumerations correctly right aligned

2 Answers2

Linked