David Price
David Price

Reputation: 170

Kivy layout not rendering as expected

I am trying to create an interface with the KV lang provided by the Kivy framework. I want to stack two BoxLayout widgets on top of each other. When the first layout is rendered it is has a default height of 350. I need this to be reduced otherwise.

Below is my layout

<RootWidget>:
# this is the rule for your root widget, defining it's look and feel.
StackLayout:
    height: 350.0
    BoxLayout:
        id: 'letterBox'
        height: 150.0
        ActionButton:
            width: 15.0
            text: '-'
        ActionButton:
            width: 15.0
            text: 'A'
        ActionButton:
            width: 15.0
            text: 'B'
        ActionButton:
            width: 15.0
            text: 'C'
        ActionButton:
            width: 15.0
            text: 'D'
        ActionButton:
            width: 15.0
            text: 'E'
        ActionButton:
            width: 15.0
            text: 'F'
        ActionButton:
            width: 15.0
            text: 'G'
        ActionButton:
            width: 15.0
            text: 'H'
        ActionButton:
            width: 15.0
            text: 'I'
        ActionButton:
            width: 15.0
            text: 'J'
        ActionButton:
            width: 15.0
            text: 'K'
        ActionButton:
            width: 15.0
            text: 'L'
        ActionButton:
            width: 15.0
            text: 'M'
        ActionButton:
            width: 15.0
            text: 'N'
        ActionButton:
            width: 15.0
            text: 'O'
        ActionButton:
            width: 15.0
            text: 'P'
        ActionButton:
            width: 15.0
            text: 'Q'
        ActionButton:
            width: 15.0
            text: 'R'
        ActionButton:
            width: 15.0
            text: 'S'
        ActionButton:
            width: 15.0
            text: 'T'
        ActionButton:
            width: 15.0
            text: 'U'
        ActionButton:
            width: 15.0
            text: 'V'
        ActionButton:
            width: 15.0
            text: 'W'
        ActionButton:
            width: 15.0
            text: 'X'
        ActionButton:
            width: 15.0
            text: 'Y'
        ActionButton:
            width: 15.0
            text: 'Z'
    BoxLayout:
        id: 'contentBox'
        height: 150.0
        ActionButton:
            text: '4' 

Upvotes: 0

Views: 152

Answers (1)

Amin Etesamian
Amin Etesamian

Reputation: 3699

You could do. Try using size_hint cause it makes your app responsive, looking alike in all screen resolutions.

    BoxLayout:
    orientation: 'vertical'
        BoxLayout:
            id: 'letterBox'
            size_hint: 1, .15

        BoxLayout:
            id: 'contentBox'
            size_hint: 1, .85

Upvotes: 1

Related Questions