KivyMD icon indicating copy to clipboard operation
KivyMD copied to clipboard

Adaptive_width and md_bg_color properties of MDLabel are not working correctly

Open Eastern-Skill7173 opened this issue 2 years ago • 8 comments

Description of the Bug

I was making a music player app with kivy & kivymd and as I was making the slider and the timers I realized something interesting.

When working with MDLabel, neither the adaptive_width nor the md_bg_color properties are working as expected.

md_bg_color creates a foreground instead of an background for the label and I have no idea what adaptive_width practically does.

So I decided to test it out and the standard kivy labels work perfectly fine unlike the kivymd labels.

You can get adaptive_width working if you set adaptive_size to True or directly setting the width to the texture_size and then setting text_size to (None, None).

Why is this bug happening in kivymd?

Code and Logs

from kivy.lang import Builder
from kivymd.app import MDApp


class MainApp(MDApp):
    def __init__(self, **kwargs):
        super(MainApp, self).__init__(**kwargs)
        self.theme_cls.theme_style = "Dark"
        self.kv = Builder.load_string('''
#:kivy 2.0.0
MDBoxLayout:
    orientation: "vertical"
    spacing: "10dp"
    MDLabel:
        text: "(MDLabel) Adaptive Width is True and not working properly."
        adaptive_width: True
        canvas.before:
            Color:
                rgba: (1, 0, 0, .5)
            Rectangle:
                pos: self.pos
                size: self.size
    MDLabel:
        # The problem with `adaptive_size` is that, if later on the text value changes,\
         it does not adapt its dimensions to the new text value 
        text: "(MDLabel) Adaptive Size is True and Adaptive Width is (kind of) working properly"
        adaptive_size: True
        canvas.before:
            Color:
                rgba: (1, 0, 0, .5)
            Rectangle:
                pos: self.pos
                size: self.size
    # MDLabel:
        # text: "(MDLabel) Directly Setting Width to Texture Size[0]"
        # I removed this label because it was completely broken, for testing you can add it yourself
        # size_hint_x: None
        # width: self.texture_size[0]
    MDLabel:
        text: "(MDLabel) In order achieve the Same behavior as Adaptive Size " \
        "from Texture Size, Text Size should be (None, None)"
        size_hint_x: None
        width: self.texture_size[0]
        text_size: (None, None)
        canvas.before:
            Color:
                rgba: (1, 0, 0, .5)
            Rectangle:
                pos: self.pos
                size: self.size
    Label:
        text: "(Standard Label) The Behavior Works Accurately and as Expected."
        size_hint_x: None
        width: self.texture_size[0]
        canvas.before:
            Color:
                rgba: (1, 0, 0, .5)
            Rectangle:
                pos: self.pos
                size: self.size
    MDLabel:
        # The `md_bg_color` property creates foreground not background
        text: "(MDLabel) The `md_bg_color` property creates foreground not background"
        adaptive_height: True
        md_bg_color: (1, 0, 0, 1)
    MDRaisedButton:
        text: "ADD TEXT"
        size_hint_x: 1
        on_release: for child in root.children[1:]:\
         child.text += child.text[int(len(child.text) / 1.1):]
''')

    def build(self):
        return self.kv


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

Screenshots

Screenshot from 2021-10-09 15-51-39 KivyMd vs Kivy Label Testing

Versions

  • OS: Zorin Os 16 (Linux, Based on Ubuntu 20.04)
  • Python: 3.8.10
  • Kivy: 2.0.0
  • KivyMD: 1.0.0dev0

Eastern-Skill7173 avatar Oct 09 '21 12:10 Eastern-Skill7173

"The md_bg_color property creates foreground not background" -you used "md_bg_color: (1, 0, 0, 1)" but for other labels used "rgba: (1, 0, 0, .5)" when I changed "md_bg_color: (1, 0, 0, .5)"got same color.

However there is an issue with "adaptive_width" under MDlabel looks like instead of effecting the width has some effect on height.

sollarp avatar Oct 12 '21 13:10 sollarp

"The md_bg_color property creates foreground not background" -you used "md_bg_color: (1, 0, 0, 1)" but for other labels used "rgba: (1, 0, 0, .5)" when I changed "md_bg_color: (1, 0, 0, .5)"got same color.

You didn't get the problem. I used (1, 0, 0, 1) for the MDLabel to demonstrate that the supposed md_bg_color creates a foreground and not a background. Like so:

from kivy.lang import Builder
from kivymd.app import MDApp


class MainApp(MDApp):
    def __init__(self, **kwargs):
        super(MainApp, self).__init__(**kwargs)
        self.kv = Builder.load_string('''
#:kivy 2.0.0
MDBoxLayout:
    orientation: "vertical"
    spacing: "15dp"
    Label:
        text: "Standard kivy label"
        size_hint_y: None
        height: self.texture_size[1]
        canvas.before:
            Color:
                rgba: (1, 0, 0, 1)
            Rectangle:
                pos: self.pos
                size: self.size
    MDLabel:
        text: "Some text rendered by `MDLabel`"
        adaptive_height: True
        md_bg_color: (1, 0, 0, 1)
''')

    def build(self):
        return self.kv


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

Screenshot from 2021-10-12 21-36-23

Eastern-Skill7173 avatar Oct 12 '21 18:10 Eastern-Skill7173

https://github.com/kivymd/KivyMD/pull/1092

HeaTTheatR avatar Oct 12 '21 19:10 HeaTTheatR

I have got it now sorry did not see that. Using given code I have different outcome. Possibly just because I'm using KivyMD Version: 0.104.2

I will have a look on that #1092 Screenshot1

sollarp avatar Oct 12 '21 20:10 sollarp

@HeaTTheatR Any updates on why the adaptive_width is not working right?

Eastern-Skill7173 avatar Dec 05 '21 10:12 Eastern-Skill7173

@Eastern-Skill7173 Is this parameter not working correctly? You have not attached a single code example where you can see the incorrect operation of this parameter ...

HeaTTheatR avatar Dec 08 '21 14:12 HeaTTheatR

Still an issue in version 1.0.2

MDLabel:
    text: "Some text rendered by `MDLabel`"
    md_bg_color: 1, 1, 0, 1
    size_hint_y: None
    size: self.texture_size

Renders background in front of text. lowering opacity of background makes the text shine through from behind it.

pynting avatar Aug 26 '22 11:08 pynting

@pynting The problem is still open...

HeaTTheatR avatar Aug 26 '22 11:08 HeaTTheatR