Scrollview in Kivys GridLayout

Question

This is the kv file for my app

<myAppLayout>       
    canvas.before:
        Color:
            rgba:1, 1, 1,1
        Rectangle:
            pos: self.pos
            size: self.size

    ScrollView:
        size: self.size 
        size_hint: (None, None)
        GridLayout:
            cols:1      

            TextInput:      

                pos_hint:{"center_x":0.5,"y":0.1}
                color:0,0.5,1,1
                background_color:0,0.5,1,1
                size:20,20          


            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size
            Label:
                color:1,0,1,1
                text:"hello"
                text_size:self.size

Python code look like this

class myAppLayout(GridLayout):
    pass

The problem is my output look some thing like this (left bottom corner) whereas I want everthing arranged line by line according to the size of the device

Answer 1

If you want the content of the ScrollView to occupy all available space you can not do:

size: self.size 
size_hint: (None, None)

On the other hand, the widgets within the ScrollView must have a defined height (size_hint_y = None) or they will automatically adjust their size to the size of the ScrollView.

Remember that if you do not specify cols or rows, the GridLayout will throw an exception. You must assign a number of rows or columns to myAppLayout.

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.lang import Builder

kv_text = '''

<MyLabel@Label>:
    color:1,0,1,1
    text:"hello"
    text_size:self.size
    size_hint_y:None
    height: 20

<myAppLayout>
    cols: 1
    canvas.before:
        Color:
            rgba:1, 1, 1,1
        Rectangle:
            pos: root.pos
            size: root.size

    ScrollView:
        GridLayout:
            cols:1
            size_hint_y: None 
            height: self.minimum_height   

            TextInput:      
                pos_hint:{"center_x":0.5,"y":0.1}
                color:0,0.5,1,1
                background_color:0,0.5,1,1
                size_hint_y: None
                height: 30          

            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:
            MyLabel:

'''

class myAppLayout(GridLayout):
    pass

class MyApp(App):
    def build(self):
        return myAppLayout()

def main():
    Builder.load_string(kv_text)
    app = MyApp()
    app.run()

if __name__ == '__main__':
    main()

Output: