pythonuser-interfacekivykivy-language
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'
Solution
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
- Making a polygon with Python matplotlib
- python-polars split string column into many columns by delimiter
- Why (x / y)[i] faster than x[i] / y[i]?
- How to connect a microsoft SQL Server database to Open Data Discovery (odd-odd-platform)?
- python libraries for ssh handling
- polynomial section of the AKS algorithm in Python
- How to get current index of element in polars list
- Polars equivalent to Pandas min_count on groupby
- How do I select the top k rows of a python polars dataframe for each group?
- Python Polars Window Function With Literal Type
- Polars: Fill missing months per group
- How do I markup a flash message in Flask?
- Cannot modify port, windows port setting problem
- How to provide only one of multiple optional parameters in FastAPI?
- Using http methods with django rest framework
- How to count work days between date columns with Polars
- How can I upload multiple videos with youtube api python
- Formatter black is not working on my VSCode...but why?
- Using print statements only to debug
- Python command line input doesn't delete japanese characters when pressing the erase key
- How can I validate CSS within a script?
- Why is max() function so much slower when comparing 2 elements vs direct comparison with an if statement?
- How to return the highest value from a multi dimensional array?
- Why can't I raise to a negative power in numpy?
- Replace letters inside words that start with and end with a specific letter not occurring anywhere else with the same amount of a specific character
- How to automate word document from Json data using python
- How can I remove 'www.' from original URL through [urllib] parse in python?
- Correct usage of async session on pytest
- Fit a power law to empirical data in Python
- Type hint that a function never returns