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.
I think your problem is the line:
size_hint: (self.parent.width, None)
in the last BoxLayout. The size_hint values are normally fractions between 0 and 1. Try just removing that line and adding:
size_hint_y: None
height: self.minimum_height
Also, the height that you assign for the TextInput instances is too small. Try changing the height of every TextInput to:
height: self.minimum_height