Change nested property in KV code

Question

In my KV file, I have created a Spinner widget on my window with about 10 items in it. However when I open the dropdown, it fills the whole vertical space of the window.

I've found a few solutions online, but they only show it with direct Python code.

Example:

spinner = Spinner(text='Test', values=('Hi', 'how', 'are', 'you', '?'))

spinner.dropdown_cls.max_height = 100

Here is my current KV code:

Spinner:
    size_hint_x: None
    width: 300
    font_size: 30
    text: "Static"
    values: "Static", "Breathing", "Spectrum Cycle", "Rainbow", "Wipe", "Bullet", "Strobe", "Starlight", "Nightlight"

My question is how do I set the 'dropdown_cls.max_height' property in my KV code?

Answer 1

Solution

In the kv file, do the following. Please refer to snippets and example for details.

DropDown max_height

Create a class rule, <MyDropdown@DropDown>: and add max_height: 100.

<MyDropdown@DropDown>:
    max_height: 100

Spinner fills whole vertical window space

Replace size_hint_x: None with size_hint: (None, None) to prevent Spinner from filling the whole vertical space of the window.

Example

main.py

from kivy.lang import Builder
from kivy.base import runTouchApp

runTouchApp(Builder.load_string('''
#:import Factory kivy.factory.Factory

<MySpinnerOptions@SpinnerOption>:
    background_color: .4, .4, .4, 1

<MyDropdown@DropDown>:
    max_height: 100

<MySpinner@Spinner>:
    size_hint: (None, None)
    width: 300
    font_size: 30
    text: "Static"
    values: "Static", "Breathing", "Spectrum Cycle", "Rainbow", "Wipe", "Bullet", "Strobe", "Starlight", "Nightlight"

    dropdown_cls: Factory.MyDropdown
    option_cls: Factory.MySpinnerOptions

GridLayout:
    cols: 1

    MySpinner:

'''))

Output