pythonkivy

How do I position buttons in a vertical box layout?


I have a sample app written in Python using the Kivy UI framework. There is an Accordion widget, and each item in the Accordion should display an entry with several TextInput fields and on the left side I would like a couple of buttons - one to edit and one to remove the entry.

I created an AccordionItem widget which includes a BoxLayout in horizontal orientation. Within this is another BoxLayout in vertical orientation for the buttons, and then two TextInput widgets. Here is the Kivy language code:

<NewItem@AccordionItem>:
    title: 'date today  time     reference'
    is_editable: False
    BoxLayout:
        orientation: 'horizontal'

        BoxLayout:
            orientation: 'vertical'
            size_hint_y: None
            height: 100
            size_hint_x: None
            width: 50

            Button:
                id: edit_button
                background_normal: 'images/iconmonstrEdit32.png'
                size_hint: None, None
                size: 30, 30
                pos_hint: {'center_x': 0.5, 'center_y': 0.5}
                on_press: root.save_entry(self)

            Button:
                id: remove_button
                background_normal: 'images/iconmonstrXMark32.png'
                size_hint: None, None
                size: 30, 30
                pos_hint: {'center_x': 0.5, 'center_y': 0.5}
                on_press: root.remove_entry(self)

        TextInput:
            id: input_1
            multiline: 'True'
            hint_text: 'This'

        TextInput:
            id: input_2
            multiline: 'True'
            hint_text: 'That'

Currently, it looks like this when I run it:

An image of an AccordionItem entry

The two buttons on the left are piled at the bottom of the BoxLayout. How can I get these buttons to display at the top, with a little space between them?

I have tried various things, none of which has changed the position of the buttons to be at the top of the BoxLayout on the left.

I tried changing pos_hint to: {'center_x': 0.5, 'top': 0.1}, but nothing changed.

The BoxLayout description in the Kivy 2.3.0 documentation says: "Position hints are partially working, depending on the orientation: If the orientation is vertical: x, right and center_x will be used." So I tried removing the 'center_y' attribute from the pos_hint, but nothing changed.

I even tried changing the BoxLayout to an AnchorLayout with anchor_y set to 'top', but that was worse.

How do I do basic widget positioning like this in Kivy, when nothing seems to change the result?


Solution

  • You can use pos_hint to adjust the location, and spacing to add space between the buttons. The pos_hint can be applied to the vertical BoxLayout, because that pos_hint is used by the containing BoxLayout which is horizontal. So that part of your kv can be:

    BoxLayout:
        orientation: 'horizontal'
    
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: None
            height: 100
            size_hint_x: None
            width: 50
            pos_hint: {'top': 1.0}
            spacing: 10