Search code examples
kivykivy-languagekivymd

Why is my button not in the place I write it to be?


So I'm making an interface for an application, and I tried to make a button and "stick it" to the right-bottom of the window, however, it works for the left part (it follows the window when expanded), but the bottom part doesn't work and I dont know why

kivy code:

Screen:
    BoxLayout:
        orientation: 'vertical'
        
        MDTopAppBar:
            id: title_bar
            title: 'Dietas'
            md_bg_color: 0.08,0.07,0.45                     
            specific_text_color: 1,1,1
            left_action_items: [["menu", lambda x: nav_drawer.set_state('toggle')]]
            
        Widget:


    MDNavigationLayout:

        ScreenManager:
            id: scr
            `your text`
            MDScreen:
                name: 'diet_screen'
                MDBoxLayout:

                    orientation: 'vertical'
                    padding: "5dp"
                    pos_hint: {"top": 1}
                    adaptive_height: True
                    
                    MDList:
                        padding: ("11dp", "60dp" , "11dp", "11dp")
                        
            
                        OneLineListItem:
                            text: 'testitem'
                            on_press:         
                             
                    
                    
                    MDRaisedButton:
                        text: "Nueva Dieta"
                        md_bg_color: "white"
                        text_color: "black"
                        font_size: 16.2
                        pos_hint: {"right": 1, "bottom": 1}

        MDNavigationDrawer:
            id: nav_drawer
        
            BoxLayout:
                orientation: 'vertical'
                spacing: '8dp'
                

               
                ScrollView:
                    MDList:

                        OneLineIconListItem:
                            text: 'Usuario'
                            on_press: 
                                scr.current= 'user_screen'
                                title_bar.title = "Usuario"
                                nav_drawer.set_state('close')
                            IconLeftWidgetWithoutTouch:
                                icon: 'descarga.png'
                                on_press: 
                                    scr.current= 'user_screen'
                                    title_bar.title = "Usuario"
                                    nav_drawer.set_state('close')
                                    

What happens What it's supposed to happen

I tried to expand the boxlayout but I dont know if that's the problem, and all the pos_hint commands.


Solution

  • This is due to this line adaptive_height: True, the height is calculated automatically, you can check what area the widget occupies in this way

    MDBoxLayout:
        orientation: 'vertical'
        padding: "5dp"
        pos_hint: {"top": 1}
        adaptive_height: True
        canvas:
            Color:
                rgba: [1, 0, 1, 0.5]
            Rectangle:
                pos: self.pos
                size: self.size
    

    A working solution to the problem

    from kivymd.app import MDApp
    from kivy.lang.builder import Builder
    
    KV = """
    Screen:
        BoxLayout:
            orientation: 'vertical'
            
            MDTopAppBar:
                id: title_bar
                title: 'Dietas'
                md_bg_color: 0.08,0.07,0.45                     
                specific_text_color: 1,1,1
                left_action_items: [["menu", lambda x: nav_drawer.set_state('toggle')]]
                
            Widget:
    
        MDNavigationLayout:
    
            ScreenManager:
                id: scr
                
                MDScreen:
                    name: 'diet_screen'
                    
                    MDBoxLayout:
                        orientation: 'vertical'
                        padding: "5dp"
                        pos_hint: {"top": 1}
                        adaptive_height: True
                        
                        MDList:
                            id: list
                            padding: ("11dp", "60dp" , "11dp", "11dp")
    
                            OneLineListItem:
                                text: 'testitem'
    
                    MDRaisedButton:
                        text: "Nueva Dieta"
                        md_bg_color: "white"
                        text_color: "black"
                        font_size: 16.2
                        pos_hint: {"right": 1, "bottom": 1}
    
            MDNavigationDrawer:
                id: nav_drawer
            
                BoxLayout:
                    orientation: 'vertical'
                    spacing: '8dp'
                   
                    ScrollView:
                        MDList:
                            OneLineIconListItem:
                                text: 'Usuario'
                                on_press: 
                                    scr.current= 'user_screen'
                                    title_bar.title = "Usuario"
                                    nav_drawer.set_state('close')
                                    
                                IconLeftWidgetWithoutTouch:
                                    # icon: 'descarga.png'
                                    on_press: 
                                        scr.current= 'user_screen'
                                        title_bar.title = "Usuario"
                                        nav_drawer.set_state('close')
    """
    
    
    class TestApp(MDApp):
        def build(self):
            self.theme_cls.theme_style = 'Dark'
            return Builder.load_string(KV)
    
    
    TestApp().run()
    

    Also a good solution to your problem would be to arrange all widgets in MDBoxLayout in this way

    MDScreen:
        name: 'diet_screen'
        
        MDBoxLayout:
            orientation: 'vertical'
            
            MDBoxLayout:
                orientation: 'vertical'
                padding: "5dp"
                adaptive_height: True
                
                MDList:
                    id: list
                    padding: ("11dp", "60dp" , "11dp", "11dp")
    
                    OneLineListItem:
                        text: 'testitem'
                        
            Widget:
                
            MDRaisedButton:
                text: "Nueva Dieta"
                md_bg_color: "white"
                text_color: "black"
                font_size: 16.2
                pos_hint: {"right": 1}
    

    enter image description here