[Python] How to add an Expansion Panel within an Expansion Panel in kivymd?

For some time, I have tried to make "Nested Expansion Panels" in kivymd, meaning an Expansion Panel within an Expansion Panel, and for the love of it, I can't make the layout work.

Should be Kivy 2.3.0 and KivyMD 2.0.1

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

from kivymd.uix.behaviors import RotateBehavior
from kivy.uix.behaviors import ButtonBehavior
from kivymd.uix.list import MDListItemTrailingIcon
from kivymd.uix.expansionpanel import MDExpansionPanel
import asynckivy
from kivy.core.window import Window


Window.size = (350, 650)
class ExpansionPanelItem(MDExpansionPanel):
...


class TrailingPressedIconButton(
ButtonBehavior, RotateBehavior, MDListItemTrailingIcon
):
...


KV = """
#:kivy 2.3.0

<ExpansionPanelItem>
adaptive_height: True

MDExpansionPanelHeader:

MDListItem:
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.surfaceContainerLowColor
ripple_effect: False

MDListItemLeadingIcon:
icon: "checkbox-blank-circle"

MDListItemHeadlineText:
text: "Task description"

MDListItemSupportingText:
text: "Note"

MDListItemTertiaryText:
text: "datetime"

TrailingPressedIconButton:
id: chevron
icon: "chevron-right"
on_release: app.tap_expansion_chevron(root, chevron)

MDExpansionPanelContent:
size_hint: 1, None
id: expansion_content
orientation: "vertical"
padding: "12dp", "12dp"
md_bg_color: self.theme_cls.surfaceContainerLowestColor

MDScreen:
BoxLayout:
orientation: "vertical"

ScrollView:
MDGridLayout:
id: widget_layout
cols: 1
size_hint_y: None
height: self.minimum_height
"""

class TodoApp(MDApp):
def build(self):
return Builder.load_string(KV)

def on_start(self):
widget_layout = self.root.ids.widget_layout
async def add_widgets():
for _ in range(10):
await asynckivy.sleep(0)
widget_widget = ExpansionPanelItem()
widget_widget.ids.expansion_content.add_widget(ExpansionPanelItem())
widget_layout.add_widget(widget_widget)
asynckivy.start(add_widgets())

def tap_expansion_chevron(self, panel: MDExpansionPanel, chevron: TrailingPressedIconButton):
panel.open() if not panel.is_open else panel.close()
panel.set_chevron_down(
chevron
) if not panel.is_open else panel.set_chevron_up(chevron)

if __name__ == "__main__":
TodoApp().run()


My problem is that when the outer panel is expanded initially, the inner panel isn't placed below the parent (as it should be) but at the height of the parent, overlapping it.

Strangely, once the inner panel is opened up and closed again, the layout is fixed for the time being ¯\_(ツ)_/¯

I'm still very new to kivy and kivymd so my question might be a bit nooby, but feel like I am loosing it and most of the youtube stuff on kivymd is ancient at this point.

Any help in fixing this is appreciated (✿◡‿◡)

Continue reading...