Blank white space overlapping kivymd card when using Bottom navigation bar

[Amita singh]

when i use bottom navigation bar, it overlap mdcards and create white space. also i want to add another card after grid layout which moves right to left. But i dont know how to create it. please hlep me 

from kivymd.app import MDApp
from kivy.lang import Builder
from kivymd.uix.behaviors import RoundedRectangularElevationBehavior
from kivymd.uix.card import MDCard
from kivymd.uix.bottomnavigation import MDBottomNavigationBar
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import Screen

kv = """
<SizedMD5Card@MD5Card>:
    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@MD1Card>:
    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'
<SizedMD2Card@MD2Card>:
    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'
<SizedMD3Card@MD3Card>:
    size_hint: None, None
    size: '300dp', '175dp'
    pos_hint: {"right": .8, "top": .2 , "bottom": 0.7}
    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'
<SizedMD4Card@MD4Card>:
    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'
<SizedMD6Card@MD6Card>:
    size_hint: 1, None
    height: 200
    orientation: 'vertical'
    elevation: 20
    pos_hint: {"center_x": .5, "center_y": .8}
    md_bg_color: [105/255,255/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'

BoxLayout:
    orientation: 'vertical'
    MDToolbar :
        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:
        MDBoxLayout:
            orientation: 'vertical'
            size_hint: 1, None
            size: self.minimum_size
            spacing: 20
            padding: 20
   
            SizedMD5Card:
           
            GridLayout:
                padding: 20
                spacing: 20
                cols: 2
                row: 2
                pos_hint: {'center_x':.5}
                SizedMD1Card:
                SizedMD2Card:
                SizedMD3Card:
                SizedMD4Card:
         
    MDBottomNavigation :
        panel_color: [204/255,204/255,255/255,1]    
           
        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 MD5Card(MDCard, RoundedRectangularElevationBehavior):
    pass
class MD1Card(MDCard, RoundedRectangularElevationBehavior):
    pass

class MD2Card(MDCard, RoundedRectangularElevationBehavior):
    pass

class MD3Card(MDCard, RoundedRectangularElevationBehavior):
    pass

class MD4Card(MDCard, RoundedRectangularElevationBehavior):
    pass

class TestCard(MDApp):
    def build(self):
        return Builder.load_string(kv)

TestCard().run()

[Elliot Garbus]

2 key problems fixed:

1. The Gridlayout was not sized.  For the ScrollView to work properly the object in the view need to be explicitly sized, not rely on size_hint in the scroll direction.
2. Turn off the size_hint for the Bottom navigation bar.  The BoxLayout was sizing the bottom nav bar, you want to use the nav bar to set the size.

 

Additionally, you had defined a base class that was the same for all of the cards, I removed the redundant code.  If you notice the 4 widgets in the GridLayout are also very similar.  These should all be based on one class, and use properties to change the attributes that differ.

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'

<SizedMD2Card@MD3Card>:

<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'

<SizedMD6Card@MD3Card>:

    size_hint: 1, None
    height: 200
    orientation: 'vertical'
    elevation: 20
    pos_hint: {"center_x": .5, "center_y": .8}
    md_bg_color: [105/255,255/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'

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:
        MDBoxLayout:
            orientation: 'vertical'
            size_hint: 1, None
            size: self.minimum_size
            spacing: 20
            padding: 20

            SizedMD5Card:

            GridLayout:

                size_hint: None, None    # Size the GridLayout
                size: self.minimum_size

                padding: 20
                spacing: 20
                cols: 2
                row: 2
                pos_hint: {'center_x':.5}
                SizedMD1Card:
                SizedMD2Card:
                SizedMD3Card:
                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 TestCard(MDApp):
    def build(self):
        return Builder.load_string(kv)


TestCard().run()

--
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/e801c027-d698-4fc9-b00a-93da5dcd6f99n%40googlegroups.com.