How to position and render a button outside the parent's limit?

[AndersonRodriguez]

Description

The behavior of the flag LV_OBJ_FLAG_OVERFLOW_VISIBLE is not clear to me. I thought that when adding this flag to a button, it would be drawn even outside the limits of its parent.

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

Simulator with resolution of 800 x 480

What LVGL version are you using?

9.1

What do you want to achieve?

I want to get something like this image:

What have you tried so far?

I tried to add LV_OBJ_FLAG_OVERFLOW_VISIBLE to parent and to button. The only way I found to get the result is: Creating a third object with a transparent background and using it as the parent of the header and button. But I would like to save a few bytes of memory and do without this extra object.

[image]

Code to reproduce

void add_header(void)
{
    lv_obj_t *header = lv_obj_create(lv_screen_active());
    lv_obj_set_size(header, lv_pct(100), 50);
    lv_obj_set_pos(header, 0, 0);
    lv_obj_set_style_bg_color(header, lv_palette_main(LV_PALETTE_BLUE_GREY), 0);
    lv_obj_remove_flag(header, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *puller = lv_button_create(header);
    lv_obj_set_size(puller, lv_pct(25), 45);
    lv_obj_align(puller, LV_ALIGN_CENTER, 0, 20);
    lv_obj_add_flag(puller, LV_OBJ_FLAG_OVERFLOW_VISIBLE);
}

Screenshot and/or video

Result:

[Stipa889]

If the object is outside the screen area (lv_screen_active()), it cannot be displayed.

[AndersonRodriguez]

I understand your point but I think it’s not the case.

In the code I’ve shown, the object “header” is inside lv_screen_active area and the object “puller” is inside the “header” area.

From the documentation I had understood that the LV_OBJ_FLAG_OVERFLOW_VISIBLE flag would cause the button to be rendered beyond the limit of the parent (which is the header object in the example) and would then be rendered in lv_screen_active:

• LV_OBJ_FLAG_OVERFLOW_VISIBLE Do not clip the children’s content to the parent’s boundary

[Stipa889]

The flag is set to the parent.

void add_header(void)
{
    lv_obj_t* header = lv_obj_create(lv_screen_active());
    lv_obj_set_size(header, lv_pct(100), 50);
    lv_obj_set_pos(header, 0, 0);
    lv_obj_set_style_bg_color(header, lv_palette_main(LV_PALETTE_BLUE_GREY), 0);
    lv_obj_remove_flag(header, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t* puller = lv_button_create(header);
    lv_obj_set_size(puller, lv_pct(25), 45);
    lv_obj_align(puller, LV_ALIGN_CENTER, 0, 20);
    lv_obj_add_flag(header, LV_OBJ_FLAG_OVERFLOW_VISIBLE);
}

[AndersonRodriguez]

Thanks for the reply.
But I think I’ve found a bug then because on my setup this is the result:

@Stipa889 Which version of LVGL are you using?

I’m running the simulator on Ubuntu 22.04.
Tried with LVGL Tag v9.1.0 and from branch master/HEAD.

If I apply also for the puller and header the result is the same:

lv_obj_add_flag(puller, LV_OBJ_FLAG_OVERFLOW_VISIBLE);
lv_obj_add_flag(header, LV_OBJ_FLAG_OVERFLOW_VISIBLE);

[Tinus]

Hello,

Does the pulldown thing need to be a child of the header? Otherwise you could always just make it a child of the active screen instead or a child of lv_layer_top().

[AndersonRodriguez]

Hello, thanks for your time.

Doesn’t exactly need it. But I chose this hierarchy to facilitate alignment and because I thought it would be a good practice

I chose to continue with the development and leave this button to be validated on the final hardware as soon as it arrives.

I solved it by creating an object with a transparent background and adding the two components as childs.

The result so far is like this:

I colored the parent object gray to identify it

[JVS]

I recognize this problem. Sometimes it gets rendered and sometimes not with the flag: LV_OBJ_FLAG_OVERFLOW_VISIBLE. It seems not reliable.