'Problem with setting size of MDDialog in KivyMD
Faced the problem of adjusting the parameters of the card and everything that is located on it. I can't set the size of the card I need and besides that, I can't set the sizes of buttons and textfields.
It looks like this on fullscreen: Screen
In small view like this: Screen
But I had to pick balance between kv file and python file. I want to have 1 size always, without changing on full screen. Please, tell me where I have mistake.
regcard.kv
<RegCard>
orientation: "vertical"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
spacing: 30
size_hint_y: None
height: 550
MDBoxLayout:
orientation: "horizontal"
size_hint_y: None
height: 50
pos_hint: {"top": 1}
MDIcon:
icon: "account-plus"
pos_hint: {"left": 1}
size_hint: None, None
size: 50, 50
MDLabel:
text: 'Reg'
font_size: 18
halign: "left"
theme_text_color: "Custom"
text_color: 0, 0, 0, 1
MDIconButton:
icon: "close"
pos_hint: {"right": 1, "bottom": 1}
on_release: app.root.get_screen('main').dialog.dismiss()
MDTextField:
id: card_first_name
mode: "rectangle"
halign: "left"
hint_text: "Name"
pos_hint: {"center_x": 0.5, "center_y": 0.9}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDTextField:
id: card_last_name
mode: "rectangle"
halign: "left"
hint_text: "Surname"
pos_hint: {"center_x": 0.5, "center_y": 0.8}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDTextField:
id: card_patronymic
mode: "rectangle"
halign: "left"
hint_text: "Patronymic"
pos_hint: {"center_x": 0.5, "center_y": 0.7}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDRectangleFlatIconButton:
id: card_status
icon: "view-list"
size_hint_x: 0.85
text: "Category"
pos_hint: {"center_x": 0.5}
on_release: root.open_status_list()
font_size: 16
icon_color: (0, 0, 0, 1)
text_color: (0, 0, 0, 1)
MDTextField:
id: card_phone
mode: "rectangle"
halign: "left"
hint_text: "Phone"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDRoundFlatIconButton:
icon: "printer"
text: "Print badge"
font_size: 16
on_release: root.print_badge()
pos_hint: {"center_x": 0.5, "center_y": 0.4}
icon_color: (0, 0, 0, 1)
text_color: (0, 0, 0, 1)
MDBoxLayout:
adaptive_size: True
orientation: "horizontal"
spacing: "10dp"
pos_hint: {"center_x": 0.7, "center_y": 0.5}
MDFillRoundFlatButton:
id: button_cancel
text: "Cancel"
font_size: 16
md_bg_color: 1, 0, 0, 1
on_press: app.root.get_screen('main').dialog.dismiss()
MDFillRoundFlatButton:
id: button_next
text: "Save"
font_size: 16
md_bg_color: 0, 0, 0, 1
on_press:
root.save_data()
if root.check_data(): \
app.root.get_screen('main').close_menu(); \
app.root.get_screen('main').find_guest(card_last_name.text)
main.kv
<MainScreen>:
name: "main"
username: username
MDBoxLayout:
orientation: "vertical"
size: root.width, root.height
spacing: 20
MDBoxLayout:
orientation: "horizontal"
size_hint_y: None
height: 50
md_bg_color: (0, 0, 0, 1)
pos_hint: {"top": 1}
TooltipMDIconButton:
icon:"account"
on_release: root.add_user()
pos_hint: {"left": 1, "top": 1}
theme_text_color: "Custom"
text_color: (1, 1, 1, 1)
tooltip_text: "New member"
TooltipMDIconButton:
icon:"xml"
on_release: root.go_url()
pos_hint: {"center_x": 0.2}
theme_text_color: "Custom"
text_color: (1, 1, 1, 1)
tooltip_text: "Something else"
TooltipMDIconButton:
icon:"rocket-launch"
on_release: root.go_url()
pos_hint: {"center_x": 0.4}
theme_text_color: "Custom"
text_color: (1, 1, 1, 1)
tooltip_text: "API"
MDBoxLayout:
size_hint: (1, None)
height: 70
orientation: "horizontal"
MDRoundFlatIconButton:
icon: "reload"
icon_color: (0, 0, 0, 1)
text: "Reload"
font_size: 14
line_color: (0, 0, 0, 0)
pos_hint: {"center_y": 0.93}
text_color: (0, 0, 0, 1)
on_release: root.update_page()
MDTextField:
id: username
halign: "center"
icon_right: "magnify"
hint_text: "Search"
helper_text: "Enter surname for searching"
helper_text_mode: "on_focus"
pos_hint: {"center_x": 0.5, "center_y": 0.93}
current_hint_text_color: 0, 0, 0, 0.5
text_color: (0, 0, 0, 1)
line_color: (0, 0, 0, 1)
on_text_validate: root.find_guest(username.text)
MDIconButton:
icon:"qrcode-scan"
on_release: root.get_qrcode()
pos_hint: {"right:": 1, "center_y": 0.93}
text_color: app.theme_cls.primary_color
ScrollView:
MDGridLayout:
id: members_list
cols: 3
size_hint_y: None
height: self.minimum_height
<TooltipMDIconButton@MDIconButton+MDTooltip>
py.
from kivy.lang import Builder
from kivy.core.window import Window
from kivy.uix.screenmanager import ScreenManager
from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen
from kivymd.uix.dialog import MDDialog
from kivymd.uix.list import TwoLineListItem
from kivymd.uix.menu import MDDropdownMenu
from kivymd.uix.button import MDIconButton
from kivymd.uix.boxlayout import MDBoxLayout
Window.minimum_width = 1280
Window.minimum_height = 1024
Builder.load_file('main.kv')
Builder.load_file('reg_card.kv')
members = [
{
"id": 1,
"first_name": "John",
"last_name": "Doe",
"phone": "123456",
"company": "Tester",
"entry_time": None,
"entered": False,
"email": "[email protected]",
"count_entry": None,
"qrcode": None,
"category": "Start",
"locale": "en",
"published_at": "2022-02-16T14:10:12.529Z",
"created_at": "2022-02-16T14:10:03.802Z",
"updated_at": "2022-02-16T14:10:12.556Z",
"localizations": []
},
{
"id": 2,
"first_name": "Eva",
"last_name": "Green",
"phone": "007008",
"company": "Demo",
"entry_time": None,
"entered": False,
"email": "[email protected]",
"count_entry": None,
"qrcode": None,
"category": "Middle",
"locale": "en",
"published_at": "2022-02-16T14:17:10.249Z",
"created_at": "2022-02-16T14:17:10.259Z",
"updated_at": "2022-02-17T10:00:46.889Z",
"localizations": []
}
]
class RegCard(MDBoxLayout):
def open_status_list(self):
menu_items = [
{
"text": f'{item}',
"viewclass": "OneLineListItem",
"on_release": lambda x=f'{item}': self.menu_callback(x),
}
for item in ['Junior', 'Middle', 'Senior']
]
self.menu = MDDropdownMenu(
caller=self.ids.card_status,
items=menu_items,
width_mult=2,
max_height=148,
radius=[20, ],
)
self.menu.open()
def print_badge(self):
print('Printing badge...')
def menu_callback(self, text_item):
self.ids.card_status.text = text_item
self.menu.dismiss()
def check_data(self):
if self.ids.card_first_name.text != '' and self.ids.card_last_name.text != '' and \
self.ids.card_phone.text != '' and self.ids.card_status.text != '':
return True
else:
return False
def save_data(self):
print('Data saved')
class MainScreen(MDScreen):
def fill_screen(self):
for member in members:
first_box = TwoLineListItem(
text=f'{member.get("first_name")} {member.get("last_name")}',
secondary_text=member.get('phone'),
)
second_box = TwoLineListItem(
text="Категория",
secondary_text=member.get('category'),
size_hint_x=0.2,
)
btn_box = MDIconButton(
icon='pencil',
)
self.ids.members_list.add_widget(first_box)
self.ids.members_list.add_widget(second_box)
self.ids.members_list.add_widget(btn_box)
def on_enter(self):
self.update_page()
def add_user(self):
self.dialog = None
if not self.dialog:
self.dialog = MDDialog(
size_hint=(0.3, None),
type="custom",
content_cls=RegCard(),
radius=[25, ],
auto_dismiss=False
)
self.dialog.open()
def close_menu(self, *args):
self.dialog.dismiss()
def update_page(self):
self.ids.username.text = ""
self.ids.members_list.clear_widgets()
self.fill_screen()
class InvisionApp(MDApp):
def build(self):
self.theme_cls.primary_palette = "BlueGray"
Window.size = (1280, 1024)
sm = ScreenManager()
sm.add_widget(MainScreen(name='main'))
return sm
if __name__ == '__main__':
InvisionApp().run()
After setting card's parameters (thanks to @ApuCoder 's advice) I faced another problem with card (when it opens) like this: screen
Solution 1:[1]
Since your RegCard is inherited from MDBoxLayout, you can adjust its children's height automatically (with adaptive_height property) or make it large enough (by calculating each child's height) to hold its children properly. With this and some other modification your reg_card.kv will look something like this,
<RegCard>
orientation: "vertical"
padding: "10dp" # Adjust to your need (atyn).
spacing: "10dp" # atyn.
adaptive_height: True
MDBoxLayout:
orientation: "horizontal"
spacing: "10dp" # atyn.
size_hint_y: None
height: "64dp" # atyn.
# pos_hint: {"top": 1}
MDIcon:
icon: "account-plus"
pos_hint: {"x": 0, "center_y": 0.5}
size_hint: None, None
size: 50, 50
MDLabel:
text: 'Reg'
font_size: 18
halign: "left"
theme_text_color: "Custom"
text_color: 0, 0, 0, 1
MDIconButton:
icon: "close"
pos_hint: {"right": 1, "center_y": 0.5}
on_release: app.root.get_screen('main').dialog.dismiss()
MDTextField:
id: card_first_name
mode: "rectangle"
halign: "left"
hint_text: "Name"
pos_hint: {"center_x": 0.5, "center_y": 0.9}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDTextField:
id: card_last_name
mode: "rectangle"
halign: "left"
hint_text: "Surname"
pos_hint: {"center_x": 0.5, "center_y": 0.8}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDTextField:
id: card_patronymic
mode: "rectangle"
halign: "left"
hint_text: "Patronymic"
pos_hint: {"center_x": 0.5, "center_y": 0.7}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDRectangleFlatIconButton:
id: card_status
icon: "view-list"
size_hint_x: 0.85
text: "Category"
pos_hint: {"center_x": 0.5}
on_release: root.open_status_list()
font_size: 16
icon_color: (0, 0, 0, 1)
text_color: (0, 0, 0, 1)
MDTextField:
id: card_phone
mode: "rectangle"
halign: "left"
hint_text: "Phone"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
size_hint_x: 0.8
line_color_focus: 0, 0, 0, 1
required: True
helper_text_mode: "on_error"
helper_text: "please fill all"
MDRoundFlatIconButton:
icon: "printer"
text: "Print badge"
font_size: 16
on_release: root.print_badge()
pos_hint: {"center_x": 0.5, "center_y": 0.4}
icon_color: (0, 0, 0, 1)
text_color: (0, 0, 0, 1)
MDBoxLayout:
adaptive_height: True
orientation: "horizontal"
spacing: "10dp"
pos_hint: {"center_x": 0.7, "center_y": 0.5}
MDFillRoundFlatButton:
id: button_cancel
text: "Cancel"
font_size: 16
md_bg_color: 1, 0, 0, 1
on_press: app.root.get_screen('main').dialog.dismiss()
MDFillRoundFlatButton:
id: button_next
text: "Save"
font_size: 16
md_bg_color: 0, 0, 0, 1
on_press:
root.save_data()
if root.check_data(): \
app.root.get_screen('main').close_menu(); \
app.root.get_screen('main').find_guest(card_last_name.text)
Solution 2:[2]
Problem with lagging card was solved this way:
class MainScreen(MDScreen):
dialog = None
def add_user(self):
if not self.dialog:
self.dialog = MDDialog(
size_hint=(None, None),
width=400,
type="custom",
content_cls=RegCard(),
radius=[25, ],
auto_dismiss=False,
)
self.dialog.open()
I pulled 'dialog = None' out of every function to the class MainScreen.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ApuCoder |
| Solution 2 | MahoneyZ |