How do I set up a scroll view Kivy?

Question

I'm relatively new to Kivy/KivyMD. I'm currently trying to figure out how to set up a scroll view for one of my screens. As far as I'm aware in order to use a scroll view I need to use a grid layout. Whenever I do this, all the items move to the left of the screen and some of them disappear completely. Below is an image of the screen I need more space for: Not enough space

Below is my python file for what I attempted:

import sqlite3

from kivymd.app import MDApp
from kivymd.uix.relativelayout import MDRelativeLayout

from kivy.lang import Builder
from kivy.properties import StringProperty, ObjectProperty
from kivy.uix.screenmanager import ScreenManager, Screen, SwapTransition
from kivy.uix.scrollview import ScrollView

Builder.load_file('ALevelNEA.kv')

##Below are the classes for my different screens

class SignupScreen(Screen):
    pass

class MenuScreen(Screen):
    pass

class SigninScreen(Screen, ScrollView):
    pass

## Below are the classes for my custom buttons, widgets and text fields
class NameField(MDRelativeLayout):
    text = StringProperty()
    hint_text = StringProperty()
    pass

class ConfirmPasswordField(MDRelativeLayout):
    text = StringProperty()
    hint_text = StringProperty()
    pass

class NameField(MDRelativeLayout):
    text = StringProperty()
    hint_text = StringProperty()
    pass
class PasswordField(MDRelativeLayout):
    text = StringProperty()
    hint_text = StringProperty()
    pass

class EmailField(MDRelativeLayout):
    text = StringProperty()
    hint_text = StringProperty()
    #email_field = ObjectProperty(None)

##Below is the code for my main app

class MainApp(MDApp):
    def build(self):
        sm = ScreenManager(transition= SwapTransition())
        sm.add_widget(MenuScreen(name='menu'))
        sm.add_widget(SigninScreen(name = 'signin'))
        sm.add_widget(SignupScreen(name='signup'))
        return sm

    def RecordCheck(self):
        print("clicked")

    def AddToRecord(self, email, passw):
        NewEmail = email
        NewPassword = passw
        # Connect to or create a new database
        conn = sqlite3.connect('example.db')
        # Create a cursor object to execute SQL commands
        cursor = conn.cursor()
        # Create a table to store the records
        cursor.execute('''CREATE TABLE IF NOT EXISTS users (email TEXT, password TEXT)''')
        # Insert the user's information into the table
        cursor.execute("INSERT INTO users (email, password) VALUES (?, ?)", (NewEmail, NewPassword))
        # Committing the changes and closing the connection to the database file
        conn.commit()
        conn.close()

if __name__ == '__main__':
    MainApp().run()

Below is the section of my KV file which is relevant for what I attempted:

<SignupScreen>:
    ScrollView:
        GridLayout:
            cols: 1
            size_hint_y: None
            height: self.minimum_height
            padding: dp(10)
            spacing: dp(10)

            Image:
                source: "Images/RegisterImage.png"
                size_hint_x: 0.4
                size_hint_y: 0.6
                allow_stretch: True
                pos_hint: {"center_x": 0.5, "center_y": 0.8 }

            MDIconButton:
                icon: "keyboard-backspace"
                pos_hint: {"center_x": 0.35, "center_y": 0.95}
                on_release:
                    root.manager.current = "menu"

            EmailField:
                id: email_widget
                hint_text: "Email"
                pos_hint: {"center_x": 0.5, "center_y": 0.55}
                size_hint_x: None
                width: "250dp"

            NameField:
                id: name_widget
                hint_text: "Name"
                pos_hint: {"center_x": 0.5, "center_y": 0.45}
                size_hint_x: None
                width: "250dp"

            PasswordField:
                id: passw_widget
                size_hint_x: None
                width: "250dp"
                hint_text: "Password"
                pos_hint: {"center_x": 0.5, "center_y": 0.35}

            ConfirmPasswordField:
                id: Cpass_widget
                size_hint_x: None
                width: "250dp"
                hint_text: "Confirm Password"
                pos_hint: {"center_x": 0.5, "center_y": 0.25}


            MDRoundFlatButton:
                text: "Sign up"
                pos_hint: {"center_x": 0.5, "center_y": 0.15}
                text_color: 0.3607, 0.3882, 1
                line_color: 0, 0, 0
                #on_release: app.AddToRecord()
                on_release:
                    app.AddToRecord(root.ids.email_widget.ids.email_field.text, root.ids.passw_widget.ids.text_field.text)

            MDLabel:
                text: "by continuing you agree to the"
                font_size: 15
                halign: 'center'
                pos_hint: {"center_y": 0.1}

            MDTextButton:
                text: "Terms and Conditions"
                font_size: 15
                pos_hint: {"center_x": 0.5, "center_y": 0.0825}
                theme_text_color: "Custom"
                text_color: 0.3607, 0.3882, 1


#Custom buttons and text fields are located below

<PasswordField>:
    size_hint_y: None
    height: text_field.height

    MDTextField:
        id: text_field
        hint_text: root.hint_text
        text: root.text
        password: True
        icon_left: "lock"

    MDIconButton:
        icon: "eye-off"
        pos_hint: {"center_y": .5}
        pos: text_field.width - self.width + dp(8), 0
        theme_text_color: "Hint"
        on_release:
            self.icon = "eye" if self.icon == "eye-off" else "eye-off"
            text_field.password = False if text_field.password is True else True

<ConfirmPasswordField>:
    size_hint_y: None
    height: text_field.height

    MDTextField:
        id: text_field
        hint_text: root.hint_text
        text: root.text
        password: True
        icon_left: "lock"

    MDIconButton:
        icon: "eye-off"
        pos_hint: {"center_y": .5}
        pos: text_field.width - self.width + dp(8), 0
        theme_text_color: "Hint"
        on_release:
            self.icon = "eye" if self.icon == "eye-off" else "eye-off"
            text_field.password = False if text_field.password is True else True

<EmailField>:
    size_hint_y: None
    height: email_field.height

    MDTextField:
        id: email_field
        hint_text: root.hint_text
        text: root.text
        icon_left: "email"

<NameField>:
    size_hint_y: None
    height: name_field.height

    MDTextField:
        id: name_field
        hint_text: root.hint_text
        text: root.text
        icon_left: "account"

Below is the result:

Failed attempt (it does scroll but the layout is wrong)

Any help would be greatly appreciated, thanks!

Answer 1

A GridLayout is not required. Try using a BoxLayout , like this:

<SignupScreen>:
    ScrollView:
        BoxLayout:
            orientation: 'vertical'
            # cols: 1