Kivy scroll view issue

Question

I want to add scroll view to radiobuttons using kv language.

My code:

main.py

from kivymd.app import MDApp
from kivy.lang import Builder

class MyKivyApp(MDApp):
    def build(self):
        self.root = Builder.load_file("main.kv")
        return self.root

if __name__ == "__main__":
    MyKivyApp().run()

main.kv

<RadioButton@CheckBox>:
    group: "radioButtons"
    size_hint_y: None
    height: 40

<TestLabel@Label>:
    text: "Test"
    color: (1, 0, 0, 1)

ScrollView:
    size_hint: (1, 1)
    pos_hint: {"x": 0.45}

    GridLayout:
        cols: 1
        padding: 10
        spacing: 15
        size_hint_y: None
        size_hint_x: None
        width: dp(100)
        height: self.minimum_height

        TestLabel:
            text: "Main Label"

        TextInput:
            id: oneTxt
            pos_hint: {"top": 0.1}
            size_hint: (1, 1)

        Button:
            id: btn1
            text: "Button 1"
            pos_hint: {"top": 0.4}

        GridLayout:
            cols: 2
            padding: 0
            spacing: 0
            size_hint_y: None
            size_hint_x: None
            height: self.minimum_height

            RadioButton:
            TestLabel:
                text: "Test1"

            RadioButton:
            TestLabel:
                text: "Test2"

            RadioButton:
            TestLabel:
                text: "Test3"

            RadioButton:
            TestLabel:
                text: "Test4"

            RadioButton:
            TestLabel:
                text: "Test5"

            RadioButton:
            TestLabel:
                text: "Test6"

            RadioButton:
            TestLabel:
                text: "Test7"

            RadioButton:
            TestLabel:
                text: "Test8"

            RadioButton:
            TestLabel:
                text: "Test9"

            RadioButton:
            TestLabel:
                text: "Test10"

            RadioButton:
            TestLabel:
                text: "Test11"

            RadioButton:
            TestLabel:
                text: "Test12"

            RadioButton:
            TestLabel:
                text: "Test13"

            RadioButton:
            TestLabel:
                text: "Test14"

            RadioButton:
            TestLabel:
                text: "Test15"

            RadioButton:
            TestLabel:
                text: "Test16"

            RadioButton:
            TestLabel:
                text: "Test17"

            RadioButton:
            TestLabel:
                text: "Test18"

            RadioButton:
            TestLabel:
                text: "Test19"

            RadioButton:
            TestLabel:
                text: "Test20"

            RadioButton:
            TestLabel:
                text: "Test21"

            RadioButton:
            TestLabel:
                text: "Test22"

            RadioButton:
            TestLabel:
                text: "Test23"

            RadioButton:
            TestLabel:
                text: "Test24"

            RadioButton:
            TestLabel:
                text: "Test25"

            RadioButton:
            TestLabel:
                text: "Test26"

            RadioButton:
            TestLabel:
                text: "Test27"

            RadioButton:
            TestLabel:
                text: "Test28"

            RadioButton:
            TestLabel:
                text: "Test29"

            RadioButton:
            TestLabel:
                text: "Test30"

            RadioButton:
            TestLabel:
                text: "Test31"

            RadioButton:
            TestLabel:
                text: "Test32"

        TestLabel:
            text: "End Label"

        Button:
            id: btn2
            text: "Button 2"
            pos_hint: {"top": 0.8}

The scroll works but other widgets are small and overlapping each other. Check out the image below:

How to fix it? Thanks.

Answer 1

When you set the height of a GridLayout to self.minimum_height, you need to specify a height for each child. For example, the first three children of the outer GridLayout could be:

    TestLabel:
        text: "Main Label"
        size_hint: (None, None)
        size: self.texture_size[0] + 10, self.texture_size[1] + 10

    TextInput:
        id: oneTxt
        size_hint: (1, None)
        height: 40

    Button:
        id: btn1
        text: "Button 1"
        size_hint: (None, None)
        size: self.texture_size[0] + 10, self.texture_size[1] + 10

Similarly, the last two could be:

    TestLabel:
        text: "End Label"
        size_hint: (None, None)
        size: self.texture_size[0] + 10, self.texture_size[1] + 10

    Button:
        id: btn2
        text: "Button 2"
        size_hint: (None, None)
        padding: 10,10
        size: self.texture_size