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

Asked By: DikobrAz

||

Answers:

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.

Answered By: Totem

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:
Answered By: inclement

Use GridLayout with cols: 1 instead of BoxLayout

Answered By: Alexey
Categories: questions Tags: ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.