Kivy BoxLayout align widgets to the top border

Question

I'm using the following Kivy code to create BoxLayout with buttons:

BoxLayout:
    orientation: "vertical"
    width: 200
    size_hint_x: None

    Button:
        size_hint_y: None
        height: 30
        text: 'btn1'

    Button:
        size_hint_y: None
        height: 30
        text: 'btn2'

    Button:
        size_hint_y: None
        height: 30
        text: 'btn3'

But buttons stick to the bottom edge, how can i push them towards the top edge of the layout?

enter image description here

@bigOTHER I don't want to scale this layout to the size of parent widget and it doesn't seem to help. — DikobrAz, Jul 09 '15 at 20:54

score 25 · Accepted Answer · answered Jul 10 '15 at 10:18

You can also put an empty Widget at the end to take up the space.

BoxLayout:
    orientation: "vertical"
    width: 200
    size_hint_x: None

    Button:
        size_hint_y: None
        height: 30
        text: 'btn1'

    Button:
        size_hint_y: None
        height: 30
        text: 'btn2'

    Button:
        size_hint_y: None
        height: 30
        text: 'btn3'

    Widget:

Totem · Answer 2 · 2015-07-11T17:05:05.753

7

It is possible to use a StackLayout for this, to make sure the buttons go from top to bottom.

You could also try using padding with the BoxLayout

From the kivy BoxLayout docs:

Padding between layout box and children: [padding_left, padding_top, padding_right, padding_bottom].

padding also accepts a two argument form [padding_horizontal, padding_vertical] and a one argument form [padding].

Changed in version 1.7.0: Replaced NumericProperty with VariableListProperty.

padding is a VariableListProperty and defaults to [0, 0, 0, 0].

For instance, yours might look like:

BoxLayout:
    orientation: "vertical"
    width: 200
    size_hint_x: None
    padding: 0, 0, 0, bottom_padding_here

What you set it to, so that it always puts the buttons in the right place, no matter the screen size, is another matter. But totally doable I believe.

If you were to add or remove buttons at some later point, you would adjust the padding etc.

edited Jul 11 '15 at 17:05

answered Jul 09 '15 at 18:48

Totem

7,189
5
39
66

I've tried padding, but you need to specify exact value, otherwise buttons will be pushed too far. So it is inconvenient to calculate it every time. – DikobrAz Jul 09 '15 at 20:43
1

But StackLayout seems to be fine, I think you should put it on top in your answer. – DikobrAz Jul 09 '15 at 20:45
I agree that StackLayout should be the top answer. – e-holder Apr 19 '19 at 17:16

score 0 · Answer 3 · edited Nov 17 '22 at 07:24

0

Use GridLayout with cols: 1 instead of BoxLayout

edited Nov 17 '22 at 07:24

Adriaan

17,741
7
42
75

answered Nov 17 '22 at 07:15

Alexey

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 19 '22 at 10:46

Kivy BoxLayout align widgets to the top border

3 Answers3