Gridlayout height based on Label height in recycleview not aligned

Question

I have managed to get the size of a box layout to change based on the corresponding Label height, however, it doesn't line up perfectly and I cannot figure out why.

I have looked at adding offsets but have had no luck since it ended up making the issue worse

Thank you for any help

MainInterface:

<MainInterface@BoxLayout>:
    orientation: "vertical"
    Label:
        #font_name: "Nunito-Black.ttf"
        text: "T            R           U             T            H"
        size_hint: 1, 0.1
    GridLayout:
        size_hint: 1, 0.12
        cols: 4
        Button:
            text: "Menu1"
        Button:
            text: "Menu2"
        Button:
            text: "Menu3"
        Button:
            text: "Menu4"
    PageLayout:
        border: "20dp"
        swipe_threshold: 0.2
        RecycleView:
            viewclass: 'PostGrid'
            scroll_y: 1
            id: rv
            data: app.posts
            RecycleBoxLayout:
                id: box
                default_size: None, None
                default_size_hint: 1, None
                size_hint_y: None
                padding: ["10dp", "16dp"]
                spacing: "8dp"
                height: self.minimum_height
                orientation: 'vertical'
                key_size: '_size'
        BoxLayout:
            orientation: "vertical"
            Button:
                text: "peni"
            Button:
                text: "tag @ will J"
            Button:
                text: "Input"


<PostGrid@BoxLayout>:
    message_id: -1
    orientation: "horizontal"
    text: ''
    spacing: "10dp"
    #size_hint: self.width, None
    _size: 0, 74
    size: 0, 74
    text_size: None, None
    BoxLayout:
        orientation: "vertical"
        spacing: "10dp"
        size_hint: .1, 1
        size: self.size
        Button:
            text: "UP"
            font_size: "5dp"
            size_hint: 1, 0.2
        Button:
            text: "DOWN"
            font_size: "5dp"
            size_hint: 1, 0.2
        Label:
            text: "test"
            font_size: "5dp"
            size_hint: 1, 0.6
    Label:
        text: root.text
        padding: 5, 5
        size_hint: .9, 1
        #size: self.texture_size
        height: self.texture_size[1]
        text_size: self.width, None
        color: 0,0,0,1
        #text_size: self.width, None
        #size_hint: None, 1
        #size: self.texture_size
        #font_name: "Nunito-Bold.ttf"
        #font_size: "12dp"
        multiline: True
        #size: 1, root.min_height
        
        on_texture_size:
            app.update_message_size(
            root.message_id,
            self.texture_size,
            root.width)

        pos: self.pos

        canvas.before:
            Color:
                rgba: (0.8, 0.8, 0.8, 1)
            RoundedRectangle:
                size: self.texture_size
                radius: [5, 5, 5, 5]
                pos: self.x, self.y
        canvas:
            Color:
                rgba:0,0.9,0.9,1
            Line:
                width:0.8
                rounded_rectangle:(self.x,self.y,self.width,self.height, 5)

from kivy.app import App
from kivy.lang import Builder
from kivy.clock import Clock
from kivy.properties import ListProperty
from kivy.animation import Animation
from kivy.metrics import dp

class TruthApp(App):
    posts = ListProperty([{'message_id':0, 'text':"testskjhfjksdhfkjshfjshfjkhskjdfhskjdhfkjshfdkjhsjkdfhskjhdfkjshdfjkhzxczxczxczxcxzczxcxsjkdfhjksdhfkjshkjdfhksjdhfjkshdfjkhsdkjhfkjshdfjkshkjfhskjhfkjshfjkshdkjfhskjhfjshfkjshdfjkshdjkfhskjhfkjshfjksdhjfhsjkdhfjkhsdkjfhskjhfjk\ngdgdgd\ndgdgdg\ndgdgdg\ndggdgd",'_size':[0,0] }, {'message_id':1, 'text':"testskjhfjksdhfkjshfjshfjkhskjdfhskjdhfkjshfdkjhsjkdfhskjhjfhskjhfjk,'_size':[0,0]"}])

    def update_message_size(self, message_id, texture_size, max_width):
        #print(self.posts)
        #print("Here")
        self.posts[message_id] = {**self.posts[message_id], '_size':[0, texture_size[1]]}


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

^ Image showing how the code above runs

Answer 1

The problem is in the viewclass of RecycleView (i.e. PostGrid). You set its heightas such it could not accomodate its children which is supposed to be the minimum height that will place all its children.

Now that's exactly the attr. minimum_height does. With this being applied you also don't need default_size: None, None (especially the height attr.)

With this and other modifications your .kv file should now look like,

MainInterface:

<MainInterface@BoxLayout>:
    orientation: "vertical"
    Label:
        #font_name: "Nunito-Black.ttf"
        text: "T            R           U             T            H"
        size_hint: 1, 0.1
    GridLayout:
        size_hint: 1, 0.12
        cols: 4
        Button:
            text: "Menu1"
        Button:
            text: "Menu2"
        Button:
            text: "Menu3"
        Button:
            text: "Menu4"
    PageLayout:
        border: "20dp"
        swipe_threshold: 0.2
        RecycleView:
            viewclass: 'PostGrid'
            scroll_y: 1
            id: rv
            data: app.posts
            RecycleBoxLayout:
                id: box
                default_size_hint: 1, None
                size_hint_y: None
                padding: ["10dp", "16dp"]
                spacing: "8dp"
                height: self.minimum_height
                orientation: 'vertical'
                key_size: '_size'
        BoxLayout:
            orientation: "vertical"
            Button:
                text: "peni"
            Button:
                text: "tag @ will J"
            Button:
                text: "Input"


<PostGrid@BoxLayout>:
    message_id: -1
    orientation: "horizontal"
    text: ''
    spacing: "10dp"
    size_hint_y: None
    #_size: 0, 74
    height: self.minimum_height
    text_size: None, None
    BoxLayout:
        orientation: "vertical"
        spacing: "10dp"
        size_hint: .1, 1
        Button:
            text: "UP"
            font_size: "5dp"
            size_hint: 1, 0.2
        Button:
            text: "DOWN"
            font_size: "5dp"
            size_hint: 1, 0.2
        Label:
            text: "test"
            font_size: "5dp"
            size_hint: 1, 0.6
    Label:
        text: root.text
        padding: 5, 5
        #size_hint: .9, 1
        #size: self.texture_size
        size_hint_y: None
        height: self.texture_size[1]
        text_size: self.width, None
        color: 0,0,0,1
        #text_size: self.width, None
        #size_hint: None, 1
        #size: self.texture_size
        #font_name: "Nunito-Bold.ttf"
        #font_size: "12dp"
        multiline: True
        #size: 1, root.min_height
        
        on_texture_size:
            app.update_message_size(
            root.message_id,
            self.texture_size,
            root.width)

        pos: self.pos

        canvas.before:
            Color:
                rgba: (0.8, 0.8, 0.8, 1)
            RoundedRectangle:
                size: self.texture_size
                radius: [5, 5, 5, 5]
                pos: self.x, self.y
        canvas:
            Color:
                rgba:0,0.9,0.9,1
            Line:
                width:0.8
                rounded_rectangle:(self.x,self.y,self.width,self.height, 5)