Button widget text wrap

mitchkapa — Fri, 05 Aug 2022 22:24:40 GMT

Is it possible to have the text within a button widget wrap to appear on multiple lines?

Re: Button widget text wrap

david_piskula — Mon, 08 Aug 2022 11:17:58 GMT

it's definitely possible but requires manual changes to the code after you've generated it.

This is the way a label is added to a button "setup_scr_screen.c":

ui->screen_btn_1_label = lv_label_create(ui->screen_btn_1); lv_label_set_text(ui->screen_btn_1_label, "very very very very very very very long text wrapped with LV_LABEL_LONG_SCROLL"); lv_obj_set_style_pad_all(ui->screen_btn_1, 0, LV_STATE_DEFAULT); lv_obj_align(ui->screen_btn_1_label, LV_ALIGN_CENTER, 0, 0);

In order to enable wrapping you need to do two things.

Manually edit the width of the label inside the button: lv_obj_set_width(ui->screen_btn_1_label, lv_pct(90)); - the lv_pct(90) value sets the width to 90% of the width of the parent (meaning the button in this case). You can also use an absolute value, like 200. By default it seems that LVGL sets the width to fit the whole text in the label and doesn't take the button width into consideration, which means that the label is created as wider than the button even though it's inside the button and simply enabling wrapping won't have any effect.
Choose the long text behavior: lv_label_set_long_mode(ui->screen_btn_1_label, LV_LABEL_LONG_WRAP);

ui->screen_btn_1_label = lv_label_create(ui->screen_btn_1); lv_label_set_text(ui->screen_btn_1_label, "very very very very very very very long text wrapped with LV_LABEL_LONG_SCROLL"); lv_obj_set_width(ui->screen_btn_1_label, lv_pct(90)); lv_label_set_long_mode(ui->screen_btn_1_label, LV_LABEL_LONG_WRAP); lv_obj_set_style_pad_all(ui->screen_btn_1, 0, LV_STATE_DEFAULT); lv_obj_align(ui->screen_btn_1_label, LV_ALIGN_CENTER, 0, 0);

I will suggest to add this functionality inside Gui Guider so that people don't have to manually edit it every time. Thanks for the question!

Best Regards,

David

Re: Button widget text wrap

ZhangJennie — Mon, 08 Aug 2022 10:48:20 GMT

HI @mitchkapa

We have escalated it as a GUI Guider feature request.

Thanks for bringing the problem to our attention.

Jun Zhang

Re: Button widget text wrap

mitchkapa — Mon, 08 Aug 2022 16:19:35 GMT

Thanks!

topic Re: Button widget text wrap in GUI Guider

Button widget text wrap

Re: Button widget text wrap

Re: Button widget text wrap

Re: Button widget text wrap