CODEWITHSUNDEEP
pythonlayoutkivy
swdev
swdev

Reputation: 5157

How do you compacted a GridLayout vertical space in Kivy?

Have a look at the screenshot below:

Kivy GridLayout screenshot

I kinda new in this Kivy layout scheme, previously I work a lot in PyQt. In PyQt, that blank vertical space can easily get rid of by using Spacer. But how do you do this in Kivy? Below is part of the KV file that constitute this layout. 

GridLayout:
        cols: 1
        GridLayout:
            cols: 2
            row_default_height: '48dp'
            row_force_default: True
            spacing: 10, 10
            padding: 10, 10

            Label:
                size_hint: None, None
                text: 'Input'
                halign: 'left'
                valign: 'top'
                text_size: self.size
                width: 50
            TextInput:
                id: txt_url
                size_hint: 1, None
                text: ''

        TabbedPanel:
            id: tp
            do_default_tab: False

            TabbedPanelItem:
                id: tab_fl
                text: ''
            TabbedPanelItem:
                text: ''
                FloatLayout
                    id: box
            TabbedPanelItem:
                text: ''
                FloatLayout
                    id: box

I Would love to know what is the best practice of using Kivy layout mechanism. :)

Upvotes: 1

Views: 7032

Answers (2)

S0AndS0
S0AndS0

Reputation: 920

Because you're using one column width in your root GridLayout, it be possible to resize the rows based off children height using the following trick for setting rows_minimum.

GridLayout:
    cols: 1
    row_force_default: True
    ## Call it what ya like, just interested in setting 'self.rows_minimum'
    foo: [self.rows_minimum.update({i: x.height}) for i, x in enumerate(reversed(list(self.children)))]
    ## ... rest of layout ...

The internal GridLayout and TabbedPanel are the rows/children of your root GridLayout, so setting heights for the internal elements should allow for the foo generator redirection to pull-up the excess space.

Now for readers that may have more than one column there be a more extensive example, that shows one way of handling auto-sizing of grid layouts and a bunch of other goodies, over at another answer regarding text input word wrapping.

Upvotes: 0

kitti
kitti

Reputation: 14814

In this case, you can take advantage of the GridLayout's minimum_height property to size it appropriately.

GridLayout:
    cols: 1
    GridLayout:
        cols: 2
        row_default_height: '48dp'
        row_force_default: True
        spacing: 10, 10
        padding: 10, 10

        # add these two lines
        size_hint_y: None
        height: self.minimum_height

        ...

Upvotes: 1

Related Questions