My buttons do not respond unless I enlarge the bottom splitter bar in Kivy; how do I fix that?

BTW, thanks to everyone at stackoverflow for being so supportive.

Thanks to crystal clear help from ‘John Anderson’ I’ve learned a megaton about using splitters, layouts & widgets in Kivy.

I’ve achieved the desired ‘look’ of my GUI thus far, but ran into an odd quirk that eludes me. My buttons stopped accepting clicks.

If one looks closely at the depiction of my GUI below, the buttons named ‘White’ & ‘Black’ have a line inside them through the text. When I pull the horizontal splitter bar down enough, the lines in the button texts move as well until they disappear causing my buttons to accept clicks again. I know it must have something to do with the layouts, but don’t see how to fix it. Can someone explain what’s going on?

Side note:–The positioning of widgets inside layouts within splitters is more convoluted than expected since any adjustments of size_hints & pos_hints, spacing and padding affect each other.

Here’s my GUI:

enter image description here

Here’s the code:

import kivy
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.splitter import Splitter
from kivy.uix.image import Image

kivy.require('2.0.0')

class ChessBoardWidget(RelativeLayout):
    def __init__(self, **kwargs):
        super(ChessBoardWidget, self).__init__(**kwargs)

        # adjust where the left side of vertical layout starts by changing 'center_x'
        repertoire_boxlayout_vert = BoxLayout(orientation='vertical', size_hint_y=.05,
                                              pos_hint={'center_x': .774})  # >center_x moves right

        # Padding between layout box and children: [padding_left, padding_top, padding_right, padding_bottom]
        # Padding puts space between widgets and the edge of layout holding the widgets
        # Spacing puts space between the widgets inside a layout
        repertoire_boxlayout_horz = BoxLayout(orientation='horizontal', size_hint=(.45, .05),
                                              spacing=10, padding=[0, 0, 0, 30])

        repertoire_boxlayout_horz.add_widget(Label(text='Repertoire for:', size_hint=(.08, 1)))
        repertoire_boxlayout_horz.add_widget(Button(text='White', size_hint=(.04, 1)))
        repertoire_boxlayout_horz.add_widget(Button(text='Black', size_hint=(.04, 1)))

        repertoire_boxlayout_vert.add_widget(repertoire_boxlayout_horz)

        chessboard_gui_boxlayout = BoxLayout(orientation='vertical', spacing=40)
        chessboard_gui_boxlayout.add_widget(
            Image(source="./data/images/chess-pieces/DarkerGreenGreyChessBoard.png", pos=self.pos, keep_ratio=True,
                  allow_stretch=True))  # default size_hint of (1,1) claims all of remaining height

        chessboard_gui_boxlayout.add_widget(repertoire_boxlayout_vert)
        self.add_widget(chessboard_gui_boxlayout)


class SplitterGui(BoxLayout):
    def __init__(self, **kwargs):
        super(SplitterGui, self).__init__(**kwargs)
        self.orientation = 'horizontal'

        # Splitter 1
        split1_boxlayout = BoxLayout(orientation='vertical')
        split1 = Splitter(sizable_from='bottom', min_size=74,
                          max_size=1100, size_hint=(1, .8))  # size_hint=(..,y is smaller, bar moves up

        chessboard_widget = ChessBoardWidget() 

        split1.add_widget(chessboard_widget)
        split1_boxlayout.add_widget(split1)
        s3_button = Button(text='s3', size_hint=(1, 1))
        split1_boxlayout.add_widget(s3_button)
        self.add_widget(split1_boxlayout)

        # Splitter 2
        split2 = Splitter(sizable_from='left', min_size=74,
                          max_size=1800, size_hint=(3.33, 1))  # size_hint=(x is larger, bar moves left
        s2_button = Button(text='s2', size_hint=(.1, 1))
        split2.add_widget(s2_button)
        self.add_widget(split2)


class ChessBoxApp(App):
    def build(self):
        return SplitterGui()  # root


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

Answer

The problem is that your repertoire_boxlayout_horz with its size_hint, spacing and padding settings leaves no space for the Buttons and Label. So those three widgets end up with a height of 0 and that results in mouse click calculations saying that the clicks do not occur on those widgets. Even though those three widgets have a height of 0, The text and background is still drawn for each. Possible fixes are to eliminate the spacing and padding settings, or set size_hint_y to None for the repertoire_boxlayout_horz with a specified height that allows for those settings, or switch to kv to define your GUI where you can use the minimum_height property of BoxLayout.