Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kivy BoxLayout align widgets to the top border

Tags:

python

kivy

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

like image 793
DikobrAz Avatar asked Jul 09 '15 17:07

DikobrAz


People also ask

What is padding in Kivy?

The padding argument tells Kivy how much space there should be between the Layout and its children, whereas the spacing arguments tells it how much spacing there should be between the children. To create the buttons, we use a simple loop that loops over a small range of numbers.

What is root widget in Kivy?

Widgets in Kivy are organized in trees. Your application has a root widget , which usually has children that can have children of their own. Children of a widget are represented as the children attribute, a Kivy ListProperty .

How many layouts are there in Kivy?

Kivy currently has eight different layouts, which are described in the following table.


2 Answers

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:
like image 122
inclement Avatar answered Oct 09 '22 13:10

inclement


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.

like image 7
Totem Avatar answered Oct 09 '22 14:10

Totem