Problem with Kivy when trying to scrolldown vertical ScrollView with an horizontal ScrollView inside

Question

Ok, so I'm building something with Kivy(1.11.1) and summarizing I have a ScrollView that scrolls vertically and inside it there are some others ScrollViews but these ones only scroll horizontally, the problem is that whenever I scroll the outer ScrollView down and the mouse position gets into the inner Horizontal ScrollViews the outer Scrollview stops scrolling down, it looks like once the mouse position collides with the horizontal scrollview the scroll behavior stops being sent to the outer ScrollView (vertical) so it stops scrolling down. What I want is something like the Netflix page, in which there are some scrollviews horizontally (My List, Series, Horror Movies, etc) that you can scroll to see more options but they're all inside an outer scrollview that scrolls vertically, of course that in Netflix when you scrolldown even if your mouse position get inside one of the horizontal scrollviews it still continue scrolling the outer ScrollView down.

I've tried setting the horizontall scrollview do_scroll_y to False but the problem goes on. Besides that. Scrolling up works just fine

from kivy.app import App
from kivy.lang.builder import Builder
from kivy.uix.boxlayout import BoxLayout

Builder.load_string(
'''
<ScrollApp>:
    ScrollView:
        bar_width: 10
        scroll_type: ['bars', 'content']

        BoxLayout:
            id: content
            orientation: 'vertical'
            size_hint: 1, None
            height: self.minimum_height
            padding: 22, 0, 22, 50
            spacing: 50
            canvas:
                Color:
                    rgba: .15, .15, .15, .9
                Rectangle:
                    size: self.size
                    pos: self.pos
            Button:
                size_hint: None, None
                width: 100
                height: 100
                on_press: print('pressed')
            # "ScrollViews containers"
            Custom
            Custom
            Custom
            Custom

<Custom@BoxLayout>:
    orientation: 'vertical'
    size_hint: 1, None
    height: self.minimum_height
    Label:
        size_hint: None, None
        size: self.texture_size
        id: label
        font_size: 20
    ScrollView:
        size_hint: 1, None
        height: 150
        do_scroll: True, False

        on_scroll_start: print('scrolling. but why?')
        GridLayout:
            id: grid
            size_hint: None, None
            size: self.minimum_width, 150
            spacing: 5
            cols: 3
            Button:
                size_hint: None, None
                size: 400, 150
            Button:
                size_hint: None, None
                size: 400, 150
            Button:
                size_hint: None, None
                size: 400, 150
''' )

class ScrollApp(BoxLayout):
    pass

class Test(App):
    def build(self):
        return ScrollApp()

Test().run()

You are more likely to get some help if you post a minimal reproducible example. — John Anderson
If you found the answer, you should post it (answer you own question) for other people who may encounter that situation. — John Anderson
Sorry, what I meant to say was that the code that I posted does work like a minimal reproducible example now. I didn't find the answer to the problem though — Gustavo Sales

John Anderson John Anderson · Accepted Answer · 2019-08-08T17:32:19

I can't claim to understand this situation completely, but it seems that vertical ScrollView inside another vertical ScrollView works. So, a work around is to make the ScrollView inside your Custom class to allow vertical scrolling (along with the horizontal scrolling). To do this, change the kv for the ScrollView inside Custom to:

ScrollView:
    size_hint: 1, None
    height: 150
    do_scroll: True, True  # allow vertical scrolling also

    on_scroll_start: print('scrolling. but why?')
    GridLayout:
        id: grid
        size_hint: None, 1.01   # height must be slightly greater than ScrollView height
        width: self.minimum_width

In order for the vertical scrolling to work in the above, the height of the GridLayout must be larger than the height of the ScrollView, thus the 1.01 size hint.

Problem with Kivy when trying to scrolldown vertical ScrollView with an horizontal ScrollView inside

1 Answers