Algin_to and style don't work together

How-to
1

Description

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

Simulator in VS2019

What LVGL version are you using?

V8.0

What do you want to achieve?

I want to display two labels vertically and have created a common style for other background color and font size. So I have created a style and and an object with this style.
The labels use this object as parent and the 2nd label alignment is changed. But I do not see the 2nd label. When I use scr_act() as parent, the alignment works.

I see a scrollbar, it looks like the 2nd label is inserted in the first label content.

What have you tried so far?

Code to reproduce

void lv_mainscreen(void)
{
    // style for large counters
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);
    lv_style_set_width(&style, 150);
    lv_style_set_height(&style, 50);

    lv_style_set_pad_ver(&style, 5);
    lv_style_set_pad_left(&style, 5);

    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_text_font(&style, &lv_font_montserrat_28);

    /*Create an object with the new style*/
    lv_obj_t* counterstyle = lv_obj_create(lv_scr_act());
    lv_obj_add_style(counterstyle, &style, 0);

    // counters
    lv_obj_t* lbl_countcut = lv_label_create(counterstyle);
    lv_label_set_text(lbl_countcut, "123");

    lv_obj_t* lbl_countleft = lv_label_create(counterstyle);
    lv_obj_align_to(lbl_countleft, lbl_countcut, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 20);
    lv_label_set_text(lbl_countleft, "22");
}

Screenshot and/or video

grafik

This produces the aligned position, but the background color is not used:

void lv_mainscreen(void)
{
    // style for large counters
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);
    lv_style_set_width(&style, 150);
    lv_style_set_height(&style, 50);

    lv_style_set_pad_ver(&style, 5);
    lv_style_set_pad_left(&style, 5);

    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_text_font(&style, &lv_font_montserrat_28);

    /*Create an object with the new style*/
    //lv_obj_t* counterstyle = lv_obj_create(lv_scr_act());
    //lv_obj_add_style(counterstyle, &style, 0);

    // counters
    lv_obj_t* lbl_countcut = lv_label_create(lv_scr_act());
    lv_obj_add_style(lbl_countcut, &style, LV_PART_MAIN);
    lv_label_set_text(lbl_countcut, "123");

    lv_obj_t* lbl_countleft = lv_label_create(lv_scr_act());
    lv_obj_align_to(lbl_countleft, lbl_countcut, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 0);
    lv_obj_add_style(lbl_countleft, &style, LV_PART_MAIN);
    lv_label_set_text(lbl_countleft, "22");
}

grafik

2

ok, got it. I have to apply the style like in my 2nd example, but I was missing the opa setting, the default style was transparent for the label.

grafik

void lv_mainscreen(void)
{
    // style for large counters
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);
    lv_style_set_width(&style, 150);
    lv_style_set_height(&style, 50);

    lv_style_set_pad_ver(&style, 5);
    lv_style_set_pad_left(&style, 5);

    lv_style_set_text_font(&style, &lv_font_montserrat_28);
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_bg_opa(&style, LV_OPA_COVER);

    // counters
    lv_obj_t* lbl_countcut = lv_label_create(lv_scr_act());
    lv_label_set_text(lbl_countcut, "123");
    lv_obj_add_style(lbl_countcut, &style, 0);

    lv_obj_t* lbl_countleft = lv_label_create(lv_scr_act());
    lv_obj_add_style(lbl_countleft, &style, 0);
    lv_obj_align_to(lbl_countleft, lbl_countcut, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 10);
    lv_label_set_text(lbl_countleft, "22");