Align text labels in the list to be in the same column

How-to
1

Description

Hi,
text labels in the list are not nicely aligned in the same column.

What do you want to achieve?

I like to have text labels in the same column.

What have you tried so far?

I know it is caused by font awesome, because this font is not monospace type. One possible solution is to convert font awesome to be monospace font and replace original fonts. But this is too complicated solution.
Maybe it’s a bug, I don’t know. What is purpose to use two separate parameters for image and text label, if text label is not properly aligned to the same position?

lv_obj_t * lv_list_add_btn(lv_obj_t * list, const void * img_src, const char * txt);

Code to reproduce

static void event_handler(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_CLICKED) {
        printf("Clicked: %s\n", lv_list_get_btn_text(obj));
    }
}

void lv_ex_list_1(void)
{
    /*Create a list*/
    lv_obj_t * list1 = lv_list_create(lv_scr_act(), NULL);
    lv_obj_set_size(list1, 160, 200);
    lv_obj_align(list1, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Add buttons to the list*/
    lv_obj_t * list_btn;

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_FILE, "New");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_DIRECTORY, "Open");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_CLOSE, "Delete");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_EDIT, "Edit");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_SAVE, "Save");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_BELL, "Notify");
    lv_obj_set_event_cb(list_btn, event_handler);

    list_btn = lv_list_add_btn(list1, LV_SYMBOL_BATTERY_FULL, "Battery");
    lv_obj_set_event_cb(list_btn, event_handler);
}

Screenshot and/or video

Untitled

2

@kisvegabor I don’t remember this being an issue before; is this a regression?

3

The list works like this from the beginning. It’s quite complicated to fix in an efficient and flexible way because any hard-coded value will result in bad alignment with different font sizes.

As a quick local fix, you can disable to layout on the list button and set the text label’s x coordinate manually.

4

It is working, thanks!

    lv_btn_set_layout(list_btn, LV_LAYOUT_OFF);
    lv_obj_align(lv_list_get_btn_label(list_btn), NULL, LV_ALIGN_IN_LEFT_MID, 60, 0);
1 Like
5

I implemented icon and text column alignment in this way in V7, but they failed in V8, how should I implement this feature in V8 ?

6

Simply

lv_obj_align(label, LV_ALIGN_LEFT_MID, 10, 0);
lv_obj_align(btn, LV_ALIGN_LEFT_MID, 50, 0);
7

Thanks for your reply，I tried it on a V8.1 simulator and I’m afraid it didn’t work

My code is as follows：

btn = lv_list_add_btn(list1, LV_SYMBOL_FILE, "New");
lv_obj_add_event_cb(btn, list_event_handler, LV_EVENT_CLICKED, NULL);

img = lv_obj_get_child(btn, 0);
label = lv_obj_get_child(btn, 1);
lv_obj_align(img, LV_ALIGN_LEFT_MID, 10, 0);
lv_obj_align(label, LV_ALIGN_LEFT_MID, 50, 0);

Run as follows：

list
list820×523 11.5 KB

8

It’s because the buttons already have a flex layout and it has higher priority than align.

It should do the trick:

  lv_obj_set_style_layout(btn, 0, 0);
9

Yes, it worked. Thank you very much！