Kivy .kv design issue
and thank you in advance.
I'm looking to design a screen in kivy that just has some accounts in MDCards. I can not for the life of me get these MDCard designs to work cleanly. The ideal functionality of this screen would be to have the title 'Accounts' in the top left. With scrollable 2 columns of MDCards (which is dynamically long - this part I've done, I think). What I'm struggling with is that the MDCards have large gaps in between the larger MDCard title labels, and the rest of the account data. I've attached a screenshot of what is going on (it should be pretty clear), and also my .kv file.
I'm not sure if I should be starting from the most child element for sizing or the root element and working from there. I want it to be dynamic based on the screen someone is using as much as possible.
#:kivy 2.1.0
<AccountWidget>:
MDCard:
orientation: 'vertical'
elevation: 2
radius: 0
md_bg_color: [0, 1, 0, 1]
GridLayout:
cols: 2
rows: 1
cols_minimum: {0: self.parent.width * 0.1, 1: self.parent.width * 0.90}
MDLabel:
id: account_id_variable
markup: True
text: f'[size=25][b]{root.id_label}[/b][/size]'
halign: 'center'
valign: 'top'
font_size: sp(22)
size_hint_y: None
height: 30
MDLabel:
id: name
markup: True
text: f'[size=25][b]{root.name_label}[/b][/size]'
halign: 'center'
valign: 'top'
font_size: sp(22)
size_hint_y: None
height: 30
GridLayout:
cols: 4
cols_minimum: {0:self.parent.width*0.15,1:self.parent.width*0.35,2:self.parent.width*0.15,3:self.parent.width*0.35}
MDLabel:
id: type_text
markup: True
text: 'Type: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: type_variable
markup: True
text: f'{root.type_label}'
halign: 'center'
bold: True
size_hint_y: None
height: 30
MDLabel:
id: owner_text
markup: True
text: 'Owner: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: owner_variable
markup: True
text: f'{root.owner_label}'
halign: 'center'
bold: True
size_hint_y: None
height: 30
MDLabel:
id: joint_text
markup: True
text: 'Joint: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: joint_variable
markup: True
text: f'{root.joint_label}'
halign: 'center'
bold: True
size_hint_y: None
height: 30
MDLabel:
id: bank_text
markup: True
text: 'Bank: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: bank_variable
markup: True
text: f'{root.bank_label}'
halign: 'center'
bold: True
size_hint_y: None
height: 30
MDLabel:
id: bsb_text
markup: True
text: 'BSB: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: bsb_variable
markup: True
text: f'{root.bsb_label}'
halign: 'center'
bold: True
size_hint_y: None
height: 30
MDLabel:
id: account_number_text
markup: True
text: 'Acct #: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: account_number_variable
markup: True
text: f'{root.account_number_label}'
halign: 'center'
bold: True
size_hint_y: None
height: 30
MDLabel:
id: high_interest_text
markup: True
text: 'High Interest: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: high_interest_variable
markup: True
text: f'{root.high_interest_label}'
bold: True
halign: 'center'
size_hint_y: None
height: 30
MDLabel:
id: interest_rate_text
markup: True
text: 'Interest Rate: '
halign: 'center'
font_size: sp(12)
size_hint_y: None
height: 30
MDLabel:
id: interest_rate_variable
markup: True
text: f'{root.interest_rate_label}%'
bold: True
halign: 'center'
size_hint_y: None
height: 30
<AccountsScreen>:
name: 'accounts_screen'
accounts_grid: accounts_grid
MDBoxLayout:
orientation: 'vertical'
padding: '10dp'
spacing: '10dp'
MDLabel:
text: 'Accounts'
font_size: sp(32)
bold: True
theme_text_color: "Primary"
size_hint_y: None
height: dp(40)
ScrollView:
do_scroll_x: False
GridLayout:
id: accounts_grid
cols: 2#2 if Window.width > 600 else 1
spacing: '5dp'
padding: '5dp'
I think you can get what you want by using the minimum_height property of the GridLayout and the MDCard. In your kv rule for AccountWidget, try something like:
<AccountWidget>:
size_hint_y: None
height: card.height
MDCard:
id: card
orientation: 'vertical'
elevation: 2
radius: 0
md_bg_color: [0, 1, 0, 1]
size_hint_y: None
height: self.minimum_height
GridLayout:
cols: 2
rows: 1
size_hint_y: None
height: self.minimum_height
cols_minimum: {0: self.parent.width * 0.1, 1: self.parent.width * 0.90}
MDLabel:
id: account_id_variable
markup: True
text: f'[size=25][b]{root.id_label}[/b][/size]'
halign: 'center'
valign: 'top'
font_size: sp(22)
size_hint_y: None
height: 30
MDLabel:
id: name
markup: True
text: f'[size=25][b]{root.name_label}[/b][/size]'
halign: 'center'
valign: 'top'
font_size: sp(22)
size_hint_y: None
height: 30
GridLayout:
cols: 4
cols_minimum: {0:self.parent.width*0.15,1:self.parent.width*0.35,2:self.parent.width*0.15,3:self.parent.width*0.35}
size_hint_y: None
height: self.minimum_height
.
.
.
There may also be some dependency on your base class for the AccountWidget, but you have not provided that information