Button widget text wrap

cancel
Showing results for 
Search instead for 
Did you mean: 

Button widget text wrap

Jump to solution
97 Views
mitchkapa
Contributor II

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

0 Kudos
1 Solution
71 Views
david_piskula
NXP Employee
NXP Employee

Hello @mitchkapa,

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.

  1. 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.
  2. 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!

IMG_20220808_104454.jpg

Best Regards,

David

View solution in original post

3 Replies
63 Views
ZhangJennie
NXP TechSupport
NXP TechSupport

HI @mitchkapa 

We have escalated it as a GUI Guider feature request.

Thanks for bringing the problem to our attention.

BR

Jun Zhang

72 Views
david_piskula
NXP Employee
NXP Employee

Hello @mitchkapa,

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.

  1. 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.
  2. 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!

IMG_20220808_104454.jpg

Best Regards,

David

52 Views
mitchkapa
Contributor II

Thanks!

0 Kudos