Closed lasifea closed 3 weeks ago
You can now add Control to suffix_icon
field instead of suffix
, and then the height will be the same. Let me know if it worked for you.
You can now add Control to
suffix_icon
field instead ofsuffix
, and then the height will be the same. Let me know if it worked for you.
I know that, if I add a custom button to the TextField component will change the height, so I can only place the button outside the TextField component. However, I still hope that the height of the TextField component will remain consistent by default after adding a custom component.
What causes the increase in height is the default height of the suffix/prefix control you add, in this case the FilledTonalButton
for example. To make the field keep it's "normal"/default height, you need to manually change the height of the added control.
verify_input = ft.TextField(
label="请输入验证码",
prefix_icon=ft.icons.KEY,
text_size=20,
suffix=ft.FilledTonalButton("发送验证码", height=24), // change height here
)
If it happens that you want to change the size of the text field itself (ex: to better accommodate the size of your suffix/prefix control), do this.
By the way, just for info, the TextField.text_size
also influences the height of the field, but it isnt a problem in this case as all your fields have thesame value.
Closing this issue as resolved.
Duplicate Check
Describe the bug
When I add a button control to the suffix of the TextField control, the height of the control is inconsistent with the height of the control without adding a suffix. I don't think this is a bug, but it has some impact on the appearance. (From machine translation, if the expression is not straightforward, please understand)
Code sample
Code
```python import flet as ft def main(page: ft.Page): page.horizontal_alignment = ft.CrossAxisAlignment.CENTER # page.vertical_alignment = ft.MainAxisAlignment.CENTER page.window.width = 600 page.window.height = 600 page.padding = 50 page.spacing = 20 def btn_clicked(e: ft.ControlEvent): if btn.text == '错误信息提示': user_input.error_text = 'something wrong!' contact_input.error_text = 'something wrong!' verify_input.error_text = 'something wrong!' btn.text = '还原' else: user_input.error_text = '' contact_input.error_text = '' verify_input.error_text = '' btn.text = '错误信息提示' page.update() user_input = ft.TextField(label='请输入用户名', prefix_icon=ft.icons.PERSON, text_size=20) contact_input = ft.TextField(label='请输入用户绑定的邮箱或电话', prefix_icon=ft.icons.CONTACT_EMERGENCY, text_size=20, suffix=ft.Icon(ft.icons.QUESTION_MARK, color=ft.colors.SECONDARY, tooltip='对此有疑问')) verify_input = ft.TextField(label='请输入验证码', prefix_icon=ft.icons.KEY, text_size=20, suffix=ft.FilledTonalButton('发送验证码')) btn = ft.ElevatedButton(text='错误信息提示', on_click=btn_clicked, height=45, width=180) page.add(user_input, contact_input, verify_input, btn) if __name__ == '__main__': ft.app(main) ```To reproduce
The height of the first input box is inconsistent with that of the third input box.
Expected behavior
I hope the default input box can maintain consistent height without manually adjusting the size of the child controls.
Screenshots / Videos
Captures
[Upload media here] ![image](https://github.com/user-attachments/assets/fe69e383-d754-4a9b-9d34-87de654aea91)Operating System
Windows
Operating system details
Windows10
Flet version
0.24.1
Regression
I'm not sure / I don't know
Suggestions
No response
Logs
Logs
```console [Paste your logs here] ```Additional details
No response