I Have browsed the web for 30 minutes looking for a solution for this problem but none of the examples on the web worked. I have tried custom heights in the GridLayout and played around with various values that other people used in the web but none of them worked. I also tried to run the code of the ScrollView in another file with only this code but the scrolling still didn't work.
The .py file is not relevant here i think because i have no code in there for this section of my program. If you still need it or need more of my kv file i will post it just send me a message thank you :)
kv:
<TrainingPlans>
name: "trainingplans"
ScrollView:
size_hint_y: .85
pos_hint: {"x": 0, "y": .15}
do_scroll_x: False
do_scroll_y: True
GridLayout:
size: (root.width, root.height)
size_hint_x: None
size_hint_Y: None
cols: 2
height: self.minimum_height
row_default_height: 150
row_force_default: True
Label:
text: "training1"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training2"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training3"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training4"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training5"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training6"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training7"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training8"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
Label:
text: "training9"
Button:
size_hint: .3, 1
background_normal: "training_programs/unknown.jpeg"
FloatLayout:
size_hint: 1, .15
Button:
text: "Back"
size_hint: .3, .8
pos_hint: {"x": .01, "y": .06}
on_release:
app.root.current = "mainwindow"
root.manager.transition.direction = "right"
Just a typo. Change:
size_hint_Y: None
to
size_hint_y: None
in your GridLayout rule in the kv.
Related
I am trying to write a Kivy file that includes a scrollview below the MDToolBar and above MDBottomNavigation. I cannot get the ScrollView content to fill the entire screen below the ToolBar and above the BottomNav. It only fills have the window vertical span. If I eliminate the toolbar and bottom nave the scrollview fills the entire vertical span without a problem. Any tips on getting the scrollview contents to fill the completely would be appreciated. I tried changing indentation and that did not work. Thanks in advance.
Screenshot
# WINDOW MANAGER
WindowManager:
MainWindow:
AboutWindow:
<MainWindow>:
name: "main"
BoxLayout:
orientation: "vertical"
MDToolbar:
title: "Solar Weather"
MDLabel:
id: sub_title
text: "SUB TITLE"
halign: "center"
size_hint: (1,0.2)
ScrollView:
size: self.size
GridLayout:
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
cols: 2
spacing: "20dp"
padding: "20dp"
# SOLAR FLUX BOX #
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
id: flux
text: "Solar Wind"
halign: "center"
MDLabel:
id: flux_value_id
text: ""
halign: "center"
MDLabel:
id: flux_time_id
text: ""
halign: "center"
MDRaisedButton:
text: "Refresh"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
MDRaisedButton:
text: "Details"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
text: "Solar Wind"
halign: "center"
MDRaisedButton:
text: "Go Back"
md_bg_color: app.theme_cls.primary_color
on_release:
root.manager.current = "main"
root.manager.transition.direction = "right"
MDBottomNavigation:
MDBottomNavigationItem:
name: 'Dark'
text: "Dark Theme"
icon: 'brightness-2'
on_tab_release: root.dark_theme()
MDBottomNavigationItem:
name: 'Light'
text: "Light Theme"
icon: 'brightness-5'
on_tab_release: root.light_theme()
MDBottomNavigationItem:
name: 'info'
text: "About"
icon: 'information'
on_tab_release:
root.manager.current = "about"
root.manager.transition.direction = "left"
MDBottomNavigationItem:
name: 'option 2'
text: "Relaod"
icon: 'reload'
#: include about.kv
I hope this helps someone else. I had to rewrite the kv file fairly extensively but it works.
# WINDOW MANAGER
WindowManager:
MainWindow:
AboutWindow:
<MainWindow>:
name: "main"
BoxLayout:
orientation: "vertical"
MDLabel:
id: title
text: "SOLAR WEATHER"
halign: "left"
size_hint: (1,0.1)
padding_x: 20
pos_hint: {"x":0.0,"y":0.9}
md_bg_color: app.theme_cls.primary_dark
MDLabel:
id: sub_title
text: "SUB TITLE"
halign: "center"
size_hint: (1,0.1)
pos_hint: {"x":0.0,"y":0.8}
ScrollView:
size: self.size
pos_hint: {"x":0,"y":0.1}
GridLayout:
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
cols: 2
spacing: "20dp"
padding: "20dp"
# SOLAR FLUX BOX #
MDCard:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
id: flux
text: "SOLAR FLUX"
halign: "center"
MDLabel:
id: flux_value_id
markup: True
text: ""
halign: "center"
MDLabel:
id: flux_time_id
text: ""
halign: "center"
MDRaisedButton:
text: "Refresh"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
MDRaisedButton:
text: "Details"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_solar_flux()
# SUN SPOT NUMBER BOX #
MDCard:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
id: ssn
text: "SUN SPOT NUMBER"
halign: "center"
MDLabel:
id: ssn_value_id
markup: True
text: ""
halign: "center"
MDLabel:
id: ssn_date_id
text: ""
halign: "center"
MDRaisedButton:
text: "Refresh"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_sunspot_number()
MDRaisedButton:
text: "Details"
pos_hint: {"x":0}
size_hint: 1,1
md_bg_color: app.theme_cls.primary_color
on_release: root.calc_sunspot_number()
MDCard:
orientation: "vertical"
padding: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDCard:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
size_hint: 1, None
height: "210dp"
elevation: 5
MDLabel:
text: "Solar Wind"
halign: "center"
MDRaisedButton:
text: "Go Back"
md_bg_color: app.theme_cls.primary_color
on_release:
root.manager.current = "main"
root.manager.transition.direction = "right"
GridLayout:
size_hint_y: None
height: self.minimum_height
width: self.minimum_width
cols: 3
spacing: "80dp"
padding: "20dp"
MDIconButton:
name: "Dark"
text: "Dark Theme"
icon: "brightness-2"
on_release: root.dark_theme()
md_bg_color: app.theme_cls.primary_dark
MDIconButton:
id: light_theme_icon
name: "Light"
text: "Light Theme"
icon: "brightness-5"
on_release: root.light_theme()
md_bg_color: app.theme_cls.primary_dark
MDIconButton:
name: "info"
text: "About"
icon: "information"
on_release:
root.manager.current = "about"
md_bg_color: app.theme_cls.primary_dark
#: include about.kv
I try to make a gui for a text based RPG, and now I want to align the text of some labels to the top left, but "halign:" and "valign:" don't seem to do anything.
So how do I align the text inside my labels? Is there something I have done horribly wrong?
This is how the GUI looks at this moment and I marked where the text should be with green arrows:
This is how my .kv file looks:
BoxLayoutExample:
<BackgroundColor#Widget>:
background_color: 1,1,1,1
canvas.before:
Color:
rgba: root.background_color
Rectangle:
size: self.size
pos: self.pos
<BackgroundLabel#Label+BackgroundColor>:
background_color: 0, 0, 0, 0
<BoxLayoutExample>:
orientation: "vertical"
BoxLayout:
orientation:"horizontal"
BackgroundLabel:
background_color: 1,0,0,1
text: "Placeholder Text\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
halign: "left"
valign: "top"
font_size: "10sp"
size_hint: .5, 1
Label:
text: "Placeholder Map/Enemy #TEST TEST TEST TEST TEST \nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
halign: "left"
valign: "top"
size_hint: 1, 1.3
BoxLayout:
orientation:"vertical"
size_hint: .5, 1
Label:
background_color: 1,1,1,.5
text: "Placeholder Stats\nHP\nMP\nDMG\nXP\nLVL"
halign: "left"
valign: "top"
size_hint: 1, .3
ScrollView:
size_hint: 1, .7
scroll_distance: 100
Label:
text: "Placeholder Inventory\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
size_hint: None, None
size: self.texture_size
halign: "left"
valign: "top"
BoxLayout:
orientation: "horizontal"
size: "60dp","60dp"
size_hint: None,None
Label:
size: "60dp","60dp"
size_hint: None,None
Button:
text: "go\nnorth"
size: "60dp","60dp"
size_hint: None,None
Label:
size: "60dp","60dp"
size_hint: None,None
BoxLayout:
orientation: "horizontal"
size: "180dp","60dp"
#pos: "0dp","60dp"
size_hint: None,None
Button:
text: "go\nwest"
size: "60dp","60dp"
#pos: "0dp","60dp"
size_hint: None,None
pos_hint: {"x":0}
Button:
text: "go\nsouth"
size: "60dp","60dp"
size_hint: None,None
Button:
text: "go\neast"
size: "60dp","60dp"
#pos: "0dp","60dp"
size_hint: None,None
Label:
size: "60dp","60dp"
size_hint: None,None
Button:
text: "use\nitem"
size: "60dp","60dp"
size_hint: None,None
Button:
text: "equip\ngear"
size: "60dp","60dp"
size_hint: None,None
Button:
text: "unequip\ngear"
size: "60dp","60dp"
size_hint: None,None
Thanks for your help, I really appreciate it.
You need to add this argument in your label:
text_size: self.size
Then the halign and valign arguments will work properly, for example:
Label:
text: "Placeholder Map/Enemy #TEST TEST TEST TEST TEST \nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST\nTEST"
text_size: self.size
halign: "left"
valign: "top"
size_hint: 1, 1.3
More details in the official kivy documentation.
I want a fixed width right sidebar on my kivy app with a list of buttons and a main area where to draw things, I am not sure which is the right way to go about it (i.e. which layout), here's where I am at so far:
layoutApp.py...
from kivy.app import App
class layoutApp(App):
pass
if __name__ == '__main__':
layoutApp().run()
And layoutApp.kv...
BoxLayout:
orientation: 'vertical'
BoxLayout:
Button:
size_hint_x: 2
BoxLayout:
orientation: 'vertical'
size_hint_x: 0.5
Button:
Button:
Button:
Button:
Which produces:
The issue is that sizes are relative, i.e. the right sidebar width changes depending on screen seize/resize which is not the intended behavior.
Thanks !
You can set the width of the sidebar, and then have the large button width depend on that by using ids:
BoxLayout:
id: top_box
orientation: 'vertical'
BoxLayout:
Button:
size_hint_x: None
width: top_box.width - bottom_box.width
BoxLayout:
id: bottom_box
orientation: 'vertical'
size_hint_x: None
width: 150
Button:
Button:
Button:
Button:
Slight modifications to #John_Anderson with skinny top aligned buttons:
BoxLayout:
id: top_box
orientation: 'vertical'
BoxLayout:
Button:
size_hint_x: None
width: top_box.width - bottom_box.width
BoxLayout:
padding: 4
id: bottom_box
orientation: 'vertical'
size_hint_x: None
width: 200
spacing: 2
Button:
id: button_1
background_normal: ''
background_color: .2, .2, .2, 1
text: 'Button 1'
color: .6, .6, .6, 1
size_hint_x: None
size_hint_y: None
width: 192
height: 40
Button:
id: button_2
background_normal: ''
background_color: .2, .2, .2, 1
text: 'Button 2'
color: .6, .6, .6, 1
size_hint_x: None
size_hint_y: None
width: 192
height: 40
Button:
id: button_3
background_normal: ''
background_color: .2, .2, .2, 1
text: 'Button 3'
color: .6, .6, .6, 1
size_hint_x: None
size_hint_y: None
width: 192
height: 40
Button:
id: button_4
background_normal: ''
background_color: .2, .2, .2, 1
text: 'Button 4'
color: .6, .6, .6, 1
size_hint_x: None
size_hint_y: None
width: 192
height: 40
Widget:
Results in:
practice screen
This is from the .py file
The screens are controlled by screen manager as you can see
class Practice_Page(Screen):
pass
class PracticeList(BoxLayout):
def practicelist(ScrollView):
practicelist.bind(minimum_height=layout.setter('height'))
.KV file:
<Practice_page>:
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: 'background1.png'
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
PracticeList:
size: 900,30
size_hint: None,None
do_scroll_x: False
BoxLayout:
orientation: 'vertical'
padding: 10
cols: 1
Button:
text: 'The Real Number System'
on_press: root.manager.current = 'open_topics'
Button:
text: 'Absolute Value'
on_press: root.manager.current = 'open_practice'
Button:
text: 'Operations W/ Integers & Fractions'
on_press: root.manager.current = 'open_topics'
Button:
text: 'Operations W/ Zero'
on_press: root.manager.current = 'open_formulas'
I have about 30 more buttons. I have no idea what I'm doing wrong, any help or suggestions will be very helpful.
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
ScrollView:
#size: 900,30
size: self.size
#do_scroll_x: False
GridLayout:
# orientation: 'vertical'
#padding: 10
size_hint_y: None
height: self.minimum_height
cols: 1
Button:
size_hint_y: None
text: 'The Real Number System'
on_press: root.manager.current = 'open_topics'
Button:
size_hint_y: None
text: 'Absolute Value'
on_press: root.manager.current = 'open_practice'
Button:
size_hint_y: None
text: 'Operations W/ Integers & Fractions'
on_press: root.manager.current = 'open_topics'
Button:
size_hint_y: None
text: 'Operations W/ Zero'
on_press: root.manager.current = 'open_formulas'
##MORE BTNS
For anyone who needs it.
Please how do I reference a member of class A in class B
Builder.load_string("""
<Main>
do_scroll_x: True
do_scroll_y: False
bar_width: 20
padding: 10
Carousel:
id: caro_slider
#direction: 'top'
padding: 10
orientation: 'vertical'
BoxLayout:
padding: 10
orientation: 'vertical'
Label:
text: "one two three"
Button:
text: 'Next'
background_color: 1, 0.1 ,0.1, 1
pos_hint: {'right': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_next()
BoxLayout:
orientation: 'vertical'
Label:
text: "five six seven"
Button:
text: "Click me"
background_color: 1, 0.1 ,0.1, 1
on_press: root.show_popup_item()
size_hint: .6, .2
pos_hint: {'center_x': 0.5, 'bottom': 1}
BoxLayout:
orientation: 'horizontal'
size_y: '35sp'
size_hint: 1, 0
Button:
text: 'Previous'
pos_hint: {'left': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_previous()
Button:
text: 'Next'
background_color: 1, 0.1 ,0.1, 1
pos_hint: {'right': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_next()
BoxLayout:
orientation: 'vertical'
size_hint: 1, None
Label:
text: "Please choose your choice"
size_hint: None, None
Label:
text: ''
size_hint: None, None
GridLayout:
orientation: 'horizontal'
size_hint: 1, None
rows: 1
row_force_default: True
row_default_height: '35sp'
CheckBox:
id: chk_box_4
height: '35sp'
group: root.group_list
size_hint: None, None
on_active: root.chk_chk(self)
Label:
text: "Four over there"
height: '35sp'
size_hint: None, None
Button:
text: 'Previous'
background_color: 1, 0.1 ,0.1, .5
pos_hint: {'left': 1}
size_hint: None, None
size: '74sp', '35sp'
on_press: caro_slider.load_previous()
# the popup
<Pops>
title: "Welcome!"
auto_dismiss: False
background_color: 0.1, 0.1 , 0.8, 0.9
size: 400, 250
size_hint: None, None
title_height: '40sp'
separator_height: '1sp'
separator_color: 1,1,1,1
BoxLayout:
orientation: 'vertical'
Label:
text: "Thanks and praises"
id: sub_title
max_lines: 5
size_hint: None, None
pos_hint: {'center_y': 0, 'center_x': 0}
Label:
id: composition
text: "Thanks be to GOD for this to [ref=work]work[/ref] and not to work."
markup: True
size_x: self.parent.size[0]
on_ref_press: print 'clicked the link', self.ids.caro_slider.slides ------> here is the problem
Button:
id: close_button
text: "Click to close"
background_color: 1, 0.1 ,0.1, 1
size_hint: .5, .5
pos_hint: {'center_x': 0.5}
on_press: root.dismiss()
""")
You need some reference to class A from class B. A simple general way to do it is to store the reference in your App class (i.e. App.get_running_app().classa = a) then reference it with App.get_running_app().classa. In specific cases there might be better places to put it than cluttering up your App though, for instance in the common parent of both class instances.