Horizontal and vertical scrollview on same screen kivy

Question

I'm trying to create a screen which has a horizontal scrollview at the top of the page, taking up ~25% of the vertical space and a vertical scrollview taking up the rest of the space (and then being able to scroll further down the screen).

I've managed to create a horizontal scrollview but can't get the vertical scrollview to work on the same screen.

py file:

import kivy
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.lang import Builder
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.image import Image
from

Window.clearcolor = (1,1,1,1)

class Window(Screen):
    pass

class MyApp(App):
    theme_cls = ThemeManager()


    def build(self):
        kv = Builder.load_file("kivy.kv")
        self.sm = WindowManager()

        screens = [Window(name="window")]
        for screen in screens:
            self.sm.add_widget(screen)

        self.sm.current = "window"
        return self.sm


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

kv file:

<Window>:
    name: "window"

    NavigationLayout:
        id: nav_layout
        MyNavDrawer:


        BoxLayout:
            orientation: "vertical"

            MDToolbar:
                pos_hint: {'top': 1}
                md_bg_color: 1, 1, 1, 1

            ScrollView: #horizontal scrollview - works fine
                size_hint_y: 0.5
                GridLayout:
                    rows: 1
                    id: scroll_horizontal
                    size_hint_x: None
                    col_default_width: root.width*0.2
                    width: self.minimum_width*1.3
                    spacing: 20

           ScrollView: #vertical scrollview, not working
                size_hint_y: 0.85
                do_scroll_x: False
                GridLayout:
                    id: scroll_vertical
                    cols: 1
                    size_hint_y: None
                    spacing: 40
                    height: self.minimum_height
                    canvas:
                        Color:
                            rgba: (1, 1, 1, 1)
                        Rectangle:
                            size: self.size
                            pos: self.pos
                    BoxLayout:
                        cols: 2
                        spacing: 10
                        Button:
                            size_hint_y: 0.5
                            text: "Btn1"
                        Button:
                            size_hint_y: 0.5
                            text: "Btn2"
                    BoxLayout:
                        cols: 2
                        spacing: 10
                        Button:
                            size_hint_y: 0.5
                            text: "Btn1"
                        Button:
                            size_hint_y: 0.5
                            text: "Btn2"
                    BoxLayout:
                        cols: 2
                        spacing: 10
                        Button:
                            size_hint_y: 0.5
                            text: "Btn1"
                        Button:
                            size_hint_y: 0.5
                            text: "Btn2"

I'd like them to be independent of each other, so you can either scroll horizontal on the top scrollview or scroll veritcally through the buttons on the boxlayouts on the vertical scrollview

Answer 1

It took some work to get your MCVE working, but here is the part of your kv that I modified to get scrolling working in both directions with two ScrollViews:

        ScrollView: #horizontal
            size_hint_y: 0.25
            do_scroll_y: False
            GridLayout:
                rows: 1
                id: scroll_horizontal
                size_hint: None, 1
                col_default_width: root.width*0.2
                width: self.minimum_width*1.3
                spacing: 20
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_x: None
                    width: self.minimum_width
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn1"
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_x: None
                    width: self.minimum_width
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn1"
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_x: None
                    width: self.minimum_width
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn1"
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn2"


        ScrollView:   # vertical
            size_hint_y: 0.75
            do_scroll_x: False
            GridLayout:
                id: scroll_vertical
                cols: 1
                size_hint: 1.0, None
                spacing: 40

                # must set height
                height: self.minimum_height
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_y: None
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn1"
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_y: None
                    height: self.minimum_height
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn1"
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_y: None
                    height: self.minimum_height
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn1"
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn2"