flet-dev / flet

Flet enables developers to easily build realtime web, mobile and desktop apps in Python. No frontend experience required.
https://flet.dev
Apache License 2.0
11.56k stars 452 forks source link

Inconsistent height after adding child controls to the input box #4212

Closed lasifea closed 3 weeks ago

lasifea commented 1 month ago

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

InesaFitsner commented 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.

lasifea commented 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.

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.

ndonkoHenri commented 3 weeks ago

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.