I created a field of type selection, this is my Python code:

'state': fields.selection(
    [('draft', 'Draft'),
    ('cancelled', 'Cancelled'),
    ('invited', 'Invited'),
    ('rejected', 'Rejected'),
    ('awaiting', 'Awaiting'),
    ('not_coming', 'Not coming'),
    ('coming', 'Coming'),
    ('absent', 'Absent'),
    ('attended', 'Attended'),
    ('completed', 'Completed')],
    'State', size=16, readonly=True),

I'm trying to see it as a status bar, and this is my XML code:

<form string="Event Meeting Registration" version="7.0">
    <header>
        <button name="move_to_cancelled" string="Cancel Registration"
         states="draft,invited" type="object"/>
        <field name="state" nolabel="1" widget="statusbar"
         statusbar_visible="draft,invited,rejected,awaiting,not_coming,coming,absent,attended,completed"/>
    </header>
    <sheet>...</sheet>
</form>

The result: I can see the button and the status bar, but the button is a line above the status bar, and the status bar is not highlighting the current state. For example, I open a record with th state draft, and this state is not highlighted, is grey like the other ones, and you can't know which state the object is in.

How can I align the button to the status bar? I tried to put the button and the field state between div tags, and even set their styles with foalt left and right, but when I did that, I wasn't able to see the status bar (I think the button occupies the whole line and the status bar was behind the button).

How can I see the current state highlighted?

Thank you in advance.