Use of ToggleButton in Kivy - image resizing problem

Question

I am tryng to assemble some Kivy widgets into a group and then be able to use the group widget with different settings. This seems to work OK at certain widget sizes but breaks down at smaller sizes.

I am using Kivy 2.0.0 , Python 3.7.4 (Pycharm IDE) on Windows 10.

Here is a screenshot to show the problem: screenshot of app running

Here is my .kv file:

<AZPlusMinusValue@BoxLayout>
    background_color: 1, 1, 1, 1
    required_height: '30dp'
    font_name: 'Times.ttf'
    font_size: '20sp'
    label_text: 'Offset:'
    label_width: 0
    toggle_width: 0
    input_width: 0

    canvas.before:
        Color:
            rgba: root.background_color
        Rectangle:
            pos: self.pos
            size: self.size

    orientation: 'horizontal'
    size_hint: None, None
    height: self.required_height

    on_toggle_width:
        self.width = self.toggle_width + self.label_width + self.input_width

    Label:
        text: root.label_text
        font_name: root.font_name
        font_size: root.font_size
        color: 0, 0, 0, 1
        size_hint: None, 1
        text_size: None, None
        size: self.texture_size
        halign: 'center'
        valign: 'center'
        padding: 2, 2
        on_texture_size:
            root.label_width = self.width

    BoxLayout:
        canvas.before:
            Color:
                rgba: 0, 1, 0, 1
            Rectangle:
                pos: self.pos
                size: self.size

        orientation: 'vertical'
        size_hint: None, 1
        padding: 2, 2, 2, 2
        spacing: 2

        ToggleButton:
            group: 'delta'
            allow_no_selection: False
            size_hint: None, .3
            on_size:
                self.width = self.height
                self.parent.width = self.width + self.parent.padding[1]*2
                root.toggle_width = self.parent.width

        ToggleButton:
            group: 'delta'
            size_hint: None, .3
            state: 'down'
            on_size:
                self.width = self.height
                self.parent.width = self.width + self.parent.padding[1]*2
                root.toggle_width = self.parent.width

<Interface@BoxLayout>:
    canvas.before:
        Color:
            rgba: 1, 0, 0, .5
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        canvas.before:
            Color:
                rgba: 0, 0, 0, 1
            Rectangle:
                pos: self.pos
                size: self.size

        size_hint: 1, None
        pos_hint: {'x':0, 'top':0.75}
        height: '30dp'

        AZPlusMinusValue:
            background_color: 1, 1, 1, 1
            required_height: '90dp'
            label_text: 'At 90dp:'

        AZPlusMinusValue:
            background_color: 1, 1, 0, 1
            required_height: '60dp'
            label_text: 'At 60dp:'

        AZPlusMinusValue:
            background_color: 0, 1, 1, 1
            required_height: '30dp'
            label_text: 'At 30dp:'

Interface:

And here is the .py code:

#! python3

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class Interface(BoxLayout):
    pass

class seekerApp(App):

    def build(self):
        ui = Interface()
        return ui


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

Answer 1

The ToggleButton has a default border:

border = ListProperty([16, 16, 16, 16])

which is described as:

Border used for :class:~kivy.graphics.vertex_instructions.BorderImage graphics instruction. Used with background_normal and background_down. Can be used for custom backgrounds.

It must be a list of four values: (bottom, right, top, left). Read the
BorderImage instruction for more information about how to use it.

`border` is a :class:`~kivy.properties.ListProperty` and defaults to
(16, 16, 16, 16)

That limits how small a ToggleButton can be. You can eliminate the border by adding:

        border: [0,0,0,0]

To each ToggleButtun in your kv.