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:
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?
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