Aligning Objects on Menu Page

How-to
1

Description

I’m trying to add a slider to a menu page. When I try to align the slider on the page, it doesn’t want to align; the object is always fixed to the top-center. I reduced my code to a single menu page and a single label instead of a slider, but I still cannot align the label. If I set the label’s parent to the active screen rather than the menu page, then I can align it properly.

How do you align an object on a menu page?

What MCU/Processor/Board and compiler are you using?

ESP32-S3 / custom board / vscode

What LVGL version are you using?

v8.3

What do you want to achieve?

Align objects on a menu page.

What have you tried so far?

Several versions of alignment with lv_obj_align and lv_align_obj_to. I’ve reduced to one menu page and one label, adding borders around the objects to see where they are aligning on screen.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

    menu = lv_menu_create(lv_scr_act());
    lv_obj_set_size(menu, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(menu);

    lv_obj_t * back_btn = lv_menu_get_main_header_back_btn(menu);
    lv_obj_t * back_btn_label = lv_label_create(back_btn);
    lv_label_set_text(back_btn_label, "");
    
    main_page = lv_menu_page_create(menu, "Test Title");
    lv_obj_set_size(main_page, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_center(main_page);
    lv_menu_set_page(menu, main_page);

    test_label = lv_label_create(main_page);
    lv_label_set_text(test_label, "X");
    lv_obj_align_to(test_label, main_page, LV_ALIGN_BOTTOM_LEFT, 2, -2);  // NOTE: I want this to align to bottom-left, NOT top-center

    lv_style_init(&temp_style);
    lv_style_set_border_color(&temp_style, lv_color_black());
    lv_style_set_border_width(&temp_style, 1);
    lv_obj_add_style(menu, &temp_style, LV_PART_MAIN); 
    lv_obj_add_style(main_page, &temp_style, LV_PART_MAIN); 
    lv_obj_add_style(test_label, &temp_style, LV_PART_MAIN);

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

PXL_20230606_192956186
PXL_20230606_1929561861751×1084 273 KB

2

change

lv_obj_align_to(test_label, main_page, LV_ALIGN_BOTTOM_LEFT, 2, -2); // NOTE: I want this to align to bottom-left, NOT top-center

to

lv_obj_align(test_label, LV_ALIGN_BOTTOM_LEFT, 0, 0)

Because you are aligning to the parent there is no need to use align_to because align is going to use the parent by default.

I have to look at the code for the menu but I am guessing that it is actually working like it should be. The “main page” that you created only holds the page name and is not the entire page. If you want the widget to appear at the bottom then you have to locate the page body object and set it to be the parent of the label.

it should align to the bottom left when you do that. you do not have a need to use align_to

3

and here is it running in the online simulator.

https://sim.lvgl.io/v9.0/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0e56d0124fbd51092c5c72501fa5f9f03cdfd168/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0e56d0124fbd51092c5c72501fa5f9f03cdfd168/examples/widgets/menu/lv_example_menu_5.py

4

Thanks kdschlosser for the example.

If you want the widget to appear at the bottom then you have to locate the page body object and set it to be the parent of the label.

Yes, that’s what I want. How do I locate the page body object and set to the label’s parent? Is it the obj in the lv_menu_page_t type?

Best,
Matt