Kivy Boxlayout Height Causes Nested Labels

Question

I want to add a guide text to my app. Should i use label for it? There is a WrappedLabel Class Code to wrap all words inside label (only an additional information). i think there is a Boxlayout height problem. I create labels and add it to boxlayout then add this boxlayout to gridlayout.

I want whatever i add to labels, Kivy must show me a smooth boxlayot (not nested) so it will seen nice in gridlayout too.

Why there is a nested problem? How can i fix this?

**** And another question if i had not used WrappedLabel Class how could i have filled the words in the label?

Thanks very much

below solutions did not work to fix height problem. texts are nested Labels have different heights so fixed height = 500 not worked.

box3 = BoxLayout(size_hint_y = None, orientation = 'vertical', height = self.minimum_height)
box3 = BoxLayout(size_hint_y = None, orientation = 'vertical', height = 500)
box3 = BoxLayout(size_hint_y = None, orientation = 'vertical')

PY Code:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.metrics import dp
from kivy.uix.image import Image
from kivy.uix.behaviors import ButtonBehavior
from kivy.clock import Clock
from kivy.uix.popup import Popup
from kivy.factory import Factory
from kivy.properties import ObjectProperty
import requests

# Pop Up
class PopupBox(Popup):

    pop_up_text = ObjectProperty()
    def update_pop_up_text(self, p_message):
        self.pop_up_text.text = p_message

# Wrapped Label        
class WrappedLabel(Label):
    
    def __init__(self, **kwargs):
        super(WrappedLabel, self).__init__(**kwargs)

        self.bind(
            width=lambda *x: self.setter('text_size')(self, (self.width, None)),
            texture_size = lambda *x: self.setter('height')(self, self.texture_size[1]))

class Test(BoxLayout):

    # Homepage Screen
    def homepage(self, screenmanager):        
        
        screenmanager.current = 'homepage_screen'
        Clock.schedule_once(self.clear_widgets)

    # Pop Up    
    def show_popup(self):
        
        self.pop_up = Factory.PopupBox()
        self.pop_up.update_pop_up_text('Loading...')
        self.pop_up.open() 

    def clear_widgets(self, *args):

        for child in [child for child in self.ids.gridsonuc.children]:
            self.ids.gridsonuc.remove_widget(child)      

    def underOver(self,screenmanager):
        
        screenmanager.current = 'underover_screen'

        self.show_popup()
        Clock.schedule_once(self.clear_widgets)     
        Clock.schedule_once(self.underOver_hesaplama)

    def underOver_hesaplama(self, *args):        

        print("""    
        Welcome to Under Over Goal Statics
        """)
        
        box3 = BoxLayout(size_hint_y = None, orientation = 'vertical', height = self.minimum_height)
        one = WrappedLabel(text = '''
[color=#ff66c4][b]>>> WHAT IS FOOTBALL PREDICTOR? <<<[/b][/color]
        ''', font_name = 'Roboto', font_size = dp(20), halign='left', markup = True)
        two = WrappedLabel(text = '''
1)Football Predictor is an application that calculates the goals per match ratio and winning percentage.
* Goals per match ratio calculation: Only the home results of the home teams and the away results of the away teams are used, so this algorithm allows us to estimate matches in a high success rate! 

2) Football Predictor helps us to find valuable odds.
High odds means high payout and a corresponding low probability of occurring.
Low odds means low payout and a corresponding high probability of occurring.
If there is high odd bet and we know that it has a high probability of occurring, this is a valuable odd.
In this guide i am going to teach you how to find valuable odds.

3) Football Predictions are updated every night at 00:10 AM (UTC+3)
        ''', font_name = 'Roboto', font_size = dp(15), halign='left', markup = True)
        three = WrappedLabel(text = '''
[color=#ff66c4][b]>>> FOOTBALL PREDICTOR'S ALGORITHM <<<[/b][/color]
        ''', font_name = 'Roboto', font_size = dp(20), halign='left', markup = True)
        four = WrappedLabel(text = '''
1) Goals Per Match Ratio Algorithm : Average Goals Per Game Calculation!
(Goals scored by the Home team while playing at Home + Goals conceded by the Away team while playing Away ) / (Number of Home games played by the Home team + Number of Away games played by the Away team) + (Goals scored by the Away team while playing Away + Goals conceded by the Home team while playing at Home) / (Number of Home games played by the Home team + Number of Away games played by the Away team)

2) 1X2 Winning Percentage Algorithm :  Home, Draw or Away Team's Winning Chance

Home Team's Winning Percentage: 
(Number of matches won by the Home team at Home + Number of matches lost by the Away team at Away) / (Number of Home games played by the Home team + Number of Away games played by the Away team) * 100

Draw Percentage: 
(Number of  matches that Draw by the Home team at Home + Number of  matches that Draw by the Away team at Away) / (Number of Home games played by the Home team + Number of Away games played by the Away team) * 100

Away Team's Winning Percentage: 
(Number of matches won by the Away team at Away + Number of matches lost by the Home team at Home) / (Number of Home games played by the Home team + Number of Away games played by the Away team) * 100
        ''', font_name = 'Roboto', font_size = dp(15), halign='left', markup = True)
        box3.add_widget(one)
        box3.add_widget(two)
        box3.add_widget(three)
        box3.add_widget(four)
        self.ids.gridsonuc.add_widget(box3)
            
        self.pop_up.dismiss()
  

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

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

KV File:

#:import NoTransition kivy.uix.screenmanager.NoTransition
<Test>:
    ScreenManager:
        transition: NoTransition()
        id: sm
        size: root.width, root.height
        Screen:
            name: 'homepage_screen'            
            BoxLayout:
                size_hint: 1, 0.10
                Button:
                    text: 'Calculate'
                    id: underOver_button_homepage
                    on_press: root.underOver(sm)     
                    background_color: 0, 0, 0, 0                                  
        Screen:
            name: 'underover_screen'
            BoxLayout:
                spacing: '20dp'
                orientation: 'vertical'    
                BoxLayout:
                    size_hint: 1, 0.10
                    Label:
                        size_hint: 1, 1
                        text: 'GUIDE'
                        font_size: '30dp'
                        color: 1, 0.4, 0.769, 1
                BoxLayout:
                    size_hint: 1, 0.80
                    ScrollView:
                        scroll_type: ['bars', 'content']
                        bar_margin: '5dp'
                        bar_color: 1, 0.4, 0.769, 1 
                        bar_width: '5dp'
                        bar_inactive_color: 1, 0.4, 0.769, 1
                        GridLayout:                            
                            id: gridsonuc
                            cols: 1
                            spacing: '50dp'
                            size_hint_y: None
                            height: self.minimum_height        
                BoxLayout:
                    size_hint: 1, 0.10
                    Button:
                        text: 'Home'
                        id: home_button_underOver
                        on_press: root.homepage(sm)
                        background_color: 0, 0, 0, 0                 

<PopupBox>:
    pop_up_text: _pop_up_text
    background_color: '#38B6FF'
    background: 'white'
    size_hint: .5, .5
    auto_dismiss: True
    title: 'Data'
    title_size: '15dp'
    BoxLayout:
        orientation: "vertical"
        Label:
            id: _pop_up_text
            text: ''
            font_size: '30dp'
            color: 1, 0.4, 0.769, 1   

Answer 1

One issue is that when you use a python statement like:

box3 = BoxLayout(size_hint_y = None, orientation = 'vertical', height = self.minimum_height)

the height = self.minimum_height part is evaluated when that python statement is executed, and the height is not updated later when children are added to the BoxLayout. To get it to update, you need to add a binding, or you could specify it in kv (where bindings are added for you automatically).

Also, I don't understand why you are adding your WrappedLabel instances to BoxLayouts and then adding those BoxLayouts to the GridLayout. Why not just add the WrappedLabels to the GridLayout?

Here are some changes that you can make to your code to get what you want:

First, redefine the WrappedLabel class like this:

# Wrapped Label
class WrappedLabel(Label):
    pass

    # def __init__(self, **kwargs):
    #     super(WrappedLabel, self).__init__(**kwargs)
    #
    #     self.bind(
    #         width=lambda *x: self.setter('text_size')(self, (self.width, None)),
    #         texture_size=lambda *x: self.setter('height')(self, self.texture_size[1]))

and add a <WrappedLabel> rule to the kv:

<WrappedLabel>:
    size_hint: None, None
    text_size: [self.parent.width*.95, None] if self.parent else [1,1]
    size: self.texture_size

This rule allows the WrappedLabel to expand vertically while keeping its width matching its parents width. The if/else construct just avoids exceptions being thrown before a parent is assigned.

Then, in your underOver_hesaplama() method, replace:

    box3.add_widget(one)
    box3.add_widget(two)
    box3.add_widget(three)
    box3.add_widget(four)
    self.ids.gridsonuc.add_widget(box3)

with:

    self.ids.gridsonuc.add_widget(one)
    self.ids.gridsonuc.add_widget(two)
    self.ids.gridsonuc.add_widget(three)
    self.ids.gridsonuc.add_widget(four)

And since it is no longer used, you can eliminate:

    box3 = BoxLayout(size_hint_y=None, orientation='vertical', height=self.minimum_height)