CODEWITHSUNDEEP
pythonkivy
Alter
Alter

Reputation: 3464

Kivy - how to change size of elements inside grid layout?

I'm new to the kivy framework and am trying to use a GridLayout to create three columns. Inside the 3rd column, I want to change the width of the element to be smaller and aligned to the right (I do not want to change the entire column width), however my attempts are not working.

main.py

from kivy.app import App
from kivy.uix.widget import Widget

class AppCore(Widget):
    pass

class TestApp(App):
    def build(self):
        return AppCore()

def run_app():
    TestApp().run()

if __name__ == '__main__':
    run_app()

test.kv

<AppCore>
    GridLayout:
        cols: 3
        size: root.width * 0.8, root.height * 0.8

        row_default_height: 30
        row_force_default: True
        center: root.width / 2, root.height / 2

        Label:
            text: 'hello world'

        TextInput:
            id: text_field
            multiline: False

        Button:
            id: f_but
            padding_right: 0
            width: 10

enter image description here

Upvotes: 3

Views: 14394

Answers (2)

eyllanesc
eyllanesc

Reputation: 243897

The solution is to establish an AnchorLayout in the third column and within that layout the button:

<AppCore>
    GridLayout:
        cols: 3
        size: root.width * 0.8, root.height * 0.8
        row_default_height: 30
        row_force_default: True
        center: root.width / 2, root.height / 2

        Label:
            text: 'hello world'

        TextInput:
            id: text_field
            multiline: False

        AnchorLayout:
            anchor_x: 'right'
            Button:
                id: f_but
                width: 40
                size_hint_x: None

enter image description here

To visualize better let's place background colors:

<AppCore>
    GridLayout:
        cols: 3
        size: root.width * 0.8, root.height * 0.8
        row_default_height: 30
        row_force_default: True
        center: root.width / 2, root.height / 2

        Label:
            text: 'hello world'

            canvas.before:
                Color:
                    rgba: 1, 0, 0, 1
                Rectangle:
                    pos: self.pos
                    size: self.size

        TextInput:
            id: text_field
            multiline: False

        AnchorLayout:
            anchor_x: 'right'
            canvas.before:
                Color:
                    rgba: 0, 0, 1, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
            Button:
                id: f_but
                width: 40
                size_hint_x: None

enter image description here

Upvotes: 4

rafaeljneves
rafaeljneves

Reputation: 18

try size_hint_x: -0.5

instead of width property in you 3rd column element.

Using a GridLayout, you can use size_hint_x to fix the col height to a specific size.

applying the change:

test.kv

<AppCore>
    GridLayout:
        cols: 3
        size: root.width * 0.8, root.height * 0.8

        row_default_height: 30
        row_force_default: True
        center: root.width / 2, root.height / 2

        Label:
            text: 'hello world'

        TextInput:
            id: text_field
            multiline: False

        Button:
            id: f_but
            padding_right: 0
            size_hint_x: -0.5

Hope this help.

Upvotes: 0

Related Questions