Position of gridlayout inside floatlayout
berk berk
for example code piece:
from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.widget import Widget
class Example(App):
def build(self):
mylayout=FloatLayout(size_hint_y=None)
lbl=Label(text='here is label')
grid=GridLayout(cols=3, rows=3, spacing='0.5dp',size_hint_y=None)
for i in range(6):
but=Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
grid.add_widget(but)
mylayout.add_widget(lbl)
mylayout.add_widget(grid)
print(grid.pos)
return mylayout
Example().run()
elli...@cox.net
I made some changes, see the comments in the code.
The default size for a widget is 100x100, When you set the size_hint to None, and don’t set the size, the size will be 100. You had the height of the enclosing FloatLayout set to 100, and were putting the widgets inside that FloatLayout.
You have not sized the Label widget. The Label widget is filling the screen, the default size_hint is (1, 1). That is why the text is in the middle of the screen.
I changed the pos (y) in the gridlayout so you could see a value other than (0,0)
When playing with Layouts the inspector can be a useful tool.
See: https://kivy.org/doc/stable/api-kivy.modules.inspector.html#
To run the inspector, on the command line type: python mymain.py -m inspector
The Inspector is a tool for finding a widget in the widget tree by clicking or tapping on it. Some keyboard shortcuts are activated:
· “Ctrl + e”: activate / deactivate the inspector view
· “Escape”: cancel widget lookup first, then hide the inspector view
Available inspector interactions:
· tap once on a widget to select it without leaving inspect mode
· double tap on a widget to select and leave inspect mode (then you can manipulate the widget again)
Some properties can be edited live. However, due to the delayed usage of some properties, it might crash if you don’t handle all the cases.
from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.label import Label
from kivy.uix.button import Button
class Example(App):
def build(self):
mylayout = FloatLayout() # let float layout fill the window, otherwise the default size is 100x100
lbl = Label(text='here is label')
# set size of GridLayout to hold 2 rows of buttons... let the grid size the buttons
# Changed the y of the
grid = GridLayout(cols=3, rows=3, spacing='0.5dp', size_hint_y=None, height='200dp', y='30dp')
for i in range(6):
but = Button(text=str(i), font_size='20sp')
grid.add_widget(but)
mylayout.add_widget(lbl)
mylayout.add_widget(grid)
print(grid.pos)
return mylayout
Example().run()
--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/e36e3914-054b-48a1-b769-c2baf5b1c1e2n%40googlegroups.com.
elli...@cox.net
Using your original code and opening the inspector to get to the FloatLayout and view the size of the FloatLayout widget.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/019501d9e514%242fc1d8c0%248f458a40%24%40cox.net.
berk berk
mylayout=FloatLayout(size_hint_y=None)
lbl=Label(text='here is label')
grid=GridLayout(cols=3, rows=3, spacing='0.5dp',size_hint_y=None)
for i in range(6):
but=Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
so, lbl=Label(text='here is label', size_hint_y=None, pos(0, dp(302))) also i tried a generally ratio with screen size; everything went well but some user changes font_size, screen zoom on their phones settings and my ratio went trash!
So, when i learn to gridlayout height(changes each of phone) I can label put on gridlayout. I don't wanna use boxlayout.
elli...@cox.net
When you set the size_hint to None, you must set the size.
Looking at the picture, the FloatLayout to be half the height of the screen, use a size hint of 0.5
The label is the size of the text, set it to texture_size
The GridLayout should be sized by the buttons. Putting this all together.
Note your GridLayout was 3x3 but you were only creating 6 buttons, I created 9 to fill the grid.
Let me know if you have any questions.
from kivy.app import App
from kivy.uix.button import Button
from kivy.lang import Builder
kv = """
FloatLayout:
size_hint_y: 0.5 # half the screen
Label:
text: 'Here is the label'
size_hint: None, None
size: self.texture_size # set string to text size
pos_hint: {'center_x': 0.5}
y: grid.top + dp(5)
GridLayout:
id: grid
cols: 3
rows: 3
spacing: '0.5dp'
size_hint_y: None # if you turn off the hint, set the size
height: self.minimum_height
"""
class Example(App):
def build(self):
return Builder.load_string(kv)
def on_start(self):
for i in range(9):
but = Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
self.root.ids.grid.add_widget(but)
Example().run()
From: kivy-...@googlegroups.com <kivy-...@googlegroups.com> On Behalf Of berk berk
Sent: Tuesday, September 12, 2023 5:33 AM
To: Kivy users support <kivy-...@googlegroups.com>
Subject: Re: [kivy-users] Position of gridlayout inside floatlayout
Thank you for your answer. I asked this question because, look in these code piece:
mylayout=FloatLayout(size_hint_y=None)
lbl=Label(text='here is label')
grid=GridLayout(cols=3, rows=3, spacing='0.5dp',size_hint_y=None)
for i in range(6):
but=Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
each of button height '100dp' and there are 3 rows and there is 0.5 spacing totally gridlayout height must be 3x0.5 + 3x100 = 301.5 dp. When i set 'dp' you know these height not same each of screen. When i check the positon this gridlayout on screen that using Window.mouse_pos; these pos are different depends screen size. Floatlayout honors the childrens size_hint and pos. But I need this gridlayout height. my mainly focus the label put on over (almost same pos) gridlayout. direct I tried kivy.metrics with dp() but doesn't work.
so, lbl=Label(text='here is label', size_hint_y=None, pos(0, dp(302))) also i tried a generally ratio with screen size; everything went well but some user changes font_size, screen zoom on their phones settings and my ratio went trash!
So, when i learn to gridlayout height(changes each of phone) I can label put on gridlayout. I don't wanna use boxlayout. 
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/42a9fb1e-3229-49cc-bc9e-3137ec0bf122n%40googlegroups.com.
elli...@cox.net
Here is the same result using a BoxLayout rather than the FloatLayout. The advantage here is the BoxLayout calculates the position of the Label.
from kivy.app import App
from kivy.uix.button import Button
from kivy.lang import Builder
kv =
"""
BoxLayout:
orientation: 'vertical'
size_hint_y: 0.5 # half the screen
Label:
text: 'Here is the label'
padding: dp(5)
size_hint_y: None
height: self.texture_size[1] # set string to text size
GridLayout:
id: grid
cols: 3
rows: 3
spacing: '0.5dp'
size_hint_y: None # if you turn off the hint, set the size
height: self.minimum_height
"""
class Example(App):
def build(self):
return Builder.load_string(kv)
def on_start(self):
for i in range(9
):
but = Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
self.root.ids.grid.add_widget(but)
Example().run()
From: kivy-...@googlegroups.com <kivy-...@googlegroups.com> On Behalf Of berk berk
Sent: Tuesday, September 12, 2023 5:33 AM
To: Kivy users support <kivy-...@googlegroups.com>
Subject: Re: [kivy-users] Position of gridlayout inside floatlayout
Thank you for your answer. I asked this question because, look in these code piece:
mylayout=FloatLayout(size_hint_y=None)
lbl=Label(text='here is label')
grid=GridLayout(cols=3, rows=3, spacing='0.5dp',size_hint_y=None)
for i in range(6):
but=Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
each of button height '100dp' and there are 3 rows and there is 0.5 spacing totally gridlayout height must be 3x0.5 + 3x100 = 301.5 dp. When i set 'dp' you know these height not same each of screen. When i check the positon this gridlayout on screen that using Window.mouse_pos; these pos are different depends screen size. Floatlayout honors the childrens size_hint and pos. But I need this gridlayout height. my mainly focus the label put on over (almost same pos) gridlayout. direct I tried kivy.metrics with dp() but doesn't work.
so, lbl=Label(text='here is label', size_hint_y=None, pos(0, dp(302))) also i tried a generally ratio with screen size; everything went well but some user changes font_size, screen zoom on their phones settings and my ratio went trash!
So, when i learn to gridlayout height(changes each of phone) I can label put on gridlayout. I don't wanna use boxlayout. 
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/42a9fb1e-3229-49cc-bc9e-3137ec0bf122n%40googlegroups.com.
berk berk
elli...@cox.net
I’d need to see the code you had on the phone to understand the problem specifically, just looking at the code you originally posted there are a few issues. I’d encourage you to use the inspector to examine the layout, I find it helpful when debugging layout issues.
def build(self):
mylayout = FloatLayout(size_hint_y=None)
# Issue: The height of the floatLayout is 100, all the widgets are getting put in this layout.
# The default size of a widget is 100x100. If you turn off the hint and do not set the size,
# the widget will be size of 100.
# You wanted this to fill the lower half of the screen, my code did that with a size_hint.
lbl = Label(text='here is label')
# The label is not sized. It is filling the layout. The default size hint is 1
# The size of the text is different than the size of the Label Widget.
# The Label is not positioned, so the default position is 0,0
# because the Label fills the layout, it will be centered in the FloatLayout.
# The height of the Label will be 100, the height of the enclosing layout.
grid = GridLayout(cols=3, rows=3, spacing='0.5dp', size_hint_y=None)
# The height of the GridLayout is not set, it will default to 100.
# This only leaves enough room for one row of buttons
# The GridLayout is on top of the label, both are positioned at 0,0
for i in range(6):
but = Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
# The Button is 100 tall, but there is not a properly sized to put it in.
grid.add_widget(but)
mylayout.add_widget(lbl)
mylayout.add_widget(grid)
print(grid.pos)
return mylayout
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/a73e6d4e-f44f-4b54-94d6-ce7f9f3d878bn%40googlegroups.com.
berk berk
mylayout = FloatLayout(size_hint_y=None) ->>normally mdfloatlayout(size=self.size, adaptive_height=True) I set. also mdlabel as well.
grid = GridLayout(cols=3, rows=3, spacing='0.5dp', size_hint_y=None) -->mdgridlayout(.....size_hint_y=None, size:self.size, adaptive_height=True)
and I set button height '75dp' then I expected the buttons fill in gridlayout height. as button height. thefore I didn't set gridlayout height.
elli...@cox.net
Looking at the docs: https://kivymd.readthedocs.io/en/1.1.1/api/kivymd/uix/#kivymd.uix.MDAdaptiveWidget.adaptive_height
Adaptive_height is the same as…
size_hint_y: None
height: self.minimum_height
Therefore, in MDFloatLayout setting self.size conflicts with setting the height to self.minimum_height.
Here is the version with an MDBoxLayout and adaptive_height. Here the BoxLayout is sized to hold it’s child widgets.
from kivymd.app import MDApp
from kivy.uix.button import Button
from kivy.lang import Builder
kv =
"""
MDBoxLayout:
orientation: 'vertical'
adaptive_height: True
MDLabel:
text: 'Here is the label'
adaptive_height: True
halign: 'center'
color: 'black'
MDGridLayout:
id: grid
adaptive_height: True
cols: 3
rows: 3
spacing: '0.5dp'
"""
class Example(MDApp):
def build(self):
return Builder.load_string(kv)
def on_start(self):
for i in range(9):
but = Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
self.root.ids.grid.add_widget(but)
Example().run()
Here is a version with a FloatLayout, It is similar to the BoxLayout, but the Label must be positioned.
from kivymd.app import MDApp
from kivy.uix.button import Button
from kivy.lang import Builder
kv =
"""
MDFloatLayout:
adaptive_height: True
MDLabel:
text: 'Here is the label'
adaptive_height: True
halign: 'center'
y: grid.top + dp(5)
MDGridLayout:
id: grid
cols: 3
rows: 3
spacing: '0.5dp'
adaptive_height: True
"""
class Example(MDApp):
def build(self):
return Builder.load_string(kv)
def on_start(self):
for i in range(9):
but = Button(text=str(i), font_size='20sp', size_hint_y=None, height='100dp')
self.root.ids.grid.add_widget(but)
Example().run()
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/cd9dfaa1-e03f-4cdd-98e3-1ad291b1bec6n%40googlegroups.com.