[Python] Whenever I have nested layouts the innermost widgets aren't bound by any layout size...

I am writing an app that on this specific screen needs to have several input boxes within a box layout which represents a flashcard, the number of flashcards is dynamic

# defines default charcatersitics of buttons
<Button>:
background_normal: ''
font_size: 32

#defines default characteristics of textInputs
<TextInput>:
font_size: 32

#Defines the screens within screen Manager
ScreenManager:
makeFlashcardsScreen:




<makeFlashcardsScreen>: # deifines the contesnts of the screen for making flashcards
name: "makeFlashcards"# name is used to link it to the build function in the py file
BoxLayout: # main Layout to hold the Scroll bar feature
orientation: 'vertical'
size: (root.width, root.height)

ScrollView: # adds a scrollbar feature along the y axis only
do_scroll_x: False
do_scroll_y: True

FloatLayout: # main layout of visible content, easily allows to place the text inputs
minHeight: self.parent.height*2
size_hint: (None,None)
size: (self.parent.width, self.minHeight)
TextInput:
hint_text: "Enter Set Name"
size_hint: (.4, None)
height: 60
pos_hint: {"x":.05, "top":.99}

TextInput:
hint_text: "Foulder select"
size_hint: (.25, None)
height: 60
pos_hint: {"x":.5, "top":.99}

BoxLayout: # a container to hold all flashcards
id: container
orientation: 'vertical'
# size: (self.parent.width, self.parent.height)
size_hint: (.8,.93)
pos_hint: {"center_x":.5}

canvas.before:
Color:
rgb: (1,1,1)
Line:
width: 2
rectangle: (self.x, self.y, self.width, self.height)

BoxLayout:
orientation: 'horizontal'
size_hint: (self.parent.width, None)
height: 80
spacing: 20
#add image input
TextInput:
hint_text: "Enter Term"
size_hint: (.3, None)# THESE ARE THE PROBLEM
height: 30

TextInput:
hint_text: "Enter a Hint"
size_hint: (.3, None)# THESE ARE THE PROBLEM
height: 30

TextInput:
hint_text: "Enter Answer"
size_hint: (.3, None)# THESE ARE THE PROBLEM
height: 30

#add image input


This is the kv file that is being used, the inputs go outside of the grandparent box layout even though size hint should make them a 1/3 of the width of their parent.

The idea is to create something similar to this:enter image description here But a simple version for starters that just has 3 text inputs next to each other and other stuff added around later like a delete button and add image buttons

I previously attempted to change the box layout to a float and relative but those are even more "buggy" or at lest harder to work with and the inputs still placed themselves no where near inside their parent. To clarify I do want dynamic width so that the interface resizes and still looks good etc.

Continue reading...