Horizontal and vertical scroll in one screen

Amita singh

unread,

Jun 5, 2022, 4:45:34 AM6/5/22

to Kivy users support

I want to add horizontal and vertical scroll view in one screen. My horizontal scroll work properly but vertical scroll not working. In vertical scroll I want to add in 1 column there are 3 row which scroll right to left.Please have a look.

from kivymd.app import MDApp

from kivy.lang import Builder

from kivymd.uix.behaviors import RoundedRectangularElevationBehavior

from kivymd.uix.card import MDCard

kv = """

<SizedMD5Card@MD3Card>:

size_hint: 1, None

height: 200

orientation: 'vertical'

elevation: 20

md_bg_color: [153/255,204/255,153/255,1]

radius: 50

Image:

source: 'C:/Users/aadit/Pictures/doctor.png'

allow_stretch: 'True'

pos_hint: {'center_x': .1, 'center_y': .0}

size_hint: None, None

size: '300dp', '175dp'

keep_ratio: 'True'

MDLabel:

text: "Consult India's Best Doctor"

halign: 'center'

bold: 'True'

line_height: '6'

font_size: '25sp'

MDFillRoundFlatButton:

text: 'consult now'

background_color: [0/255,51/255,204/255,1]

pos_hint: {'center_x': 0.5, 'Top': .2}

<SizedMD1Card@MD3Card>:

size_hint: None, None

size: '300dp', '175dp'

pos_hint: {"center_x": .2, "center_y": .2}

orientation: 'vertical'

padding: 16

elevation: 20

md_bg_color: [153/255,255/255,102/255,1]

radius: 20

Image:

source: 'C:/Users/aadit/Pictures/diesease.png'

MDLabel:

text: "Health Plan"

halign: 'center'

bold: 'True'

font_size: '20sp'

<SizedMD2Card@MD3Card>:

size_hint: None, None

size: '300dp', '175dp'

pos_hint: {"center_x": .2, "center_y": .6}

orientation: 'vertical'

padding: 16

elevation: 20

md_bg_color: [153/255,255/255,102/255,1]

radius: 20

Image:

source: 'C:/Users/aadit/Pictures/labtest.png'

MDLabel:

text: "Lab Test"

halign: 'center'

bold: 'True'

font_size: '20sp'

<SizedMD4Card@MD3Card>:

size_hint: None, None

size: '300dp', '175dp'

pos_hint: {"center_x": .2, "center_y": .6}

orientation: 'vertical'

padding: 16

elevation: 20

md_bg_color: [255/255,153/255,153/255,1]

radius: 20

Image:

source: 'C:/Users/aadit/Pictures/radiology.png'

MDLabel:

text: "Radiology"

halign: 'center'

bold: 'True'

font_size: '20sp'

<SizedMD6Card@MD3Card>:

size_hint: None, None

size: '300dp', '175dp'

pos_hint: {"center_x": .2, "center_y": .6}

orientation: 'vertical'

padding: 16

elevation: 20

md_bg_color: [255/255,153/255,153/255,1]

radius: 20

Image:

source: 'C:/Users/aadit/Pictures/specialist.png'

MDLabel:

text: "Specialist Doctor"

halign: 'center'

bold: 'True'

font_size: '20sp'

BoxLayout:

orientation: 'vertical'

MDToolbar :

size_hint_y: None

md_bg_color : [68/255,62/255,108/255,1]

title : 'Hi Amita !'

right_action_items : [['cart', lambda x: app.callback(x), 'My Cart'], ['bell', lambda x : app.callback(x), 'Notification']]

ScrollView: # horizontal

MDBoxLayout:

orientation: 'vertical'

size_hint: 1, None

size: self.minimum_size

spacing: 20

padding: 20

SizedMD5Card:

GridLayout:

size_hint: None, None

size: self.minimum_size

padding: 20

spacing: 30

cols: 2

row: 2

SizedMD1Card:

SizedMD2Card:

SizedMD6Card:

SizedMD4Card:

SizedMD5Card:

ScrollView: # vertical

size_hint_y: None

do_scroll_x: False

BoxLayout:

orientation: 'vertical'

GridLayout:

cols: 1

row: 3

size_hint: None, None

spacing: 20

height: self.minimum_height

SizedMD2Card:

SizedMD6Card:

SizedMD4Card:

MDBottomNavigation :

panel_color: [204/255,204/255,255/255,1]

size_hint_y: None # turn off the size hint, to overide the boxlayout, bottom Nav has a size.

MDBottomNavigationItem:

text: 'Home'

icon: 'home'

MDBottomNavigationItem:

text: 'My Plan'

icon: 'text-box-check'

MDBottomNavigationItem:

name: 'screen 1'

text: 'Record'

icon: 'notebook'

specific_text_color: [1,0,0,1]

MDBottomNavigationItem:

text: 'Account'

icon: 'account-circle'

MDBottomNavigationItem:

text: 'Menu'

icon: 'menu'

"""

class MD3Card(MDCard, RoundedRectangularElevationBehavior):

pass

class Impact_Health(MDApp):

def build(self):

return Builder.load_string(kv)

Impact_Health().run()

Elliot Garbus

unread,

Jun 5, 2022, 11:03:26 AM6/5/22

to kivy-...@googlegroups.com

You comments, the behavior of the code and your request below are not in alignment. The upper scroll view is a vertical scroll view, and is working correctly.

Did you want to add a horizontal ScrollView below the vertical ScrollView?

ScrollView: # horizontal *** This is a vertical ScrollView, and is working.

MDBoxLayout:

orientation: 'vertical'

size_hint: 1, None

size: self.minimum_size

spacing: 20

padding: 20

SizedMD5Card:

GridLayout:

size_hint: None, None

size: self.minimum_size

padding: 20

spacing: 30

cols: 2

row: 2

SizedMD1Card:

SizedMD2Card:

SizedMD6Card:

SizedMD4Card:

SizedMD5Card:

ScrollView: # vertical # I assume you want this to be Horizontal, Is that correct?

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/a463b4a0-0dd0-4534-854b-37cca0424b97n%40googlegroups.com.

Elliot Garbus

unread,

Jun 5, 2022, 11:12:43 AM6/5/22

to kivy-...@googlegroups.com

I’ve presumed this is what you are looking for,,, Please read: https://kivy.org/doc/stable/api-kivy.uix.scrollview.html?highlight=scrollview#managing-the-content-size-and-position

You need to size the Layout under the scrollview. In your original code, you were attempting to scroll an unsized boxlayout.

"""

    ScrollView:   # Changed to Horizontal
        size_hint_y: None
        height: dp(175)
        do_scroll_y: False
        do_scroll_x: True
        GridLayout:
            cols: 3
            row: 1


            size_hint: None, None
            size: self.minimum_size

            spacing: 20

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/629cc558.1c69fb81.34cca.3e2eSMTPIN_ADDED_MISSING%40gmr-mx.google.com.

Reply all

Reply to author

Forward