Add users' style to dropdown list

Important: unclear posts may not receive useful answers.

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the FAQ and read the relevant part of the documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.

Description

hi, I have some questions for using dropdown list widget. yeah, I add my own styles for dropdown list, because I need to show chinese characters in my dorpdown list, and the code is shown below. I found that if I craete the dropdown list by my own API, it can show chinese characters, but while the opntions is too much that when I open the list, it diffcult to selected the ‘option1’, it hard to scroll up to the first option, is something wrong with my codes?

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

What LVGL version are you using?

8.2

What do you want to achieve?

What have you tried so far?

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.

The code block(s) should be formatted like:

lv_style_t cet_dropdown_style_bg;
lv_style_t cet_dropdown_style_list;

void cet_general_dropdownlist_style_init(void)
{
    lv_style_init(&cet_dropdown_style_bg);
    lv_style_set_radius(&cet_dropdown_style_bg, 0);
    lv_style_set_text_font(&cet_dropdown_style_bg, &msyh_12);

    lv_style_init(&cet_dropdown_style_list);
    lv_style_set_radius(&cet_dropdown_style_list, 0);
    //lv_style_set_border_width(&cet_dropdown_style_list, 1);
    //lv_style_set_pad_left(&cet_dropdown_style_list, 0);
    //lv_style_set_pad_right(&cet_dropdown_style_list, 0);
    //lv_style_set_pad_top(&cet_dropdown_style_list, 0);
    //lv_style_set_pad_bottom(&cet_dropdown_style_list, 0);
    lv_style_set_text_align(&cet_dropdown_style_list, LV_TEXT_ALIGN_CENTER);
    lv_style_set_text_font(&cet_dropdown_style_list, &msyh_12);
    lv_style_set_max_height(&cet_dropdown_style_list, 300);
}

lv_obj_t* cet_general_dropdownlist_create(lv_obj_t* par, lv_coord_t w,
                                lv_style_t* style_bg, lv_style_t* style_list,
                                const char* option)
{
    lv_obj_t* dd = lv_dropdown_create(par);
    lv_obj_set_width(dd, w);
    lv_dropdown_set_symbol(dd, NULL);

    if (style_bg != NULL)
        lv_obj_add_style(dd, style_bg, LV_PART_MAIN);
    else
        lv_obj_add_style(dd, &cet_dropdown_style_bg, LV_PART_MAIN);

    lv_obj_t* list = lv_dropdown_get_list(dd);
    if (list != NULL)
    {
        if (style_list != NULL)
            lv_obj_add_style(list, style_list, LV_PART_MAIN);
        else
            lv_obj_add_style(list, &cet_dropdown_style_list, LV_PART_MAIN);
    }

    if (option != NULL)
        lv_dropdown_set_options(dd, option);

    return dd;
}


static void dd_event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* dd = lv_event_get_target(e);

    if (code == LV_EVENT_VALUE_CHANGED)
    {
        lv_obj_t* list = lv_dropdown_get_list(dd);
        lv_obj_add_style(list, &cet_dropdown_style_list, LV_PART_MAIN);
    }
}

static void lv_dropdown_list(lv_obj_t* par)
{
    cet_general_dropdownlist_style_init();

    static const char* dd1_options = "option1\noption2\noption3\noption4\noption5\noption6\noption7\noption8\noption9\n"
            "option10\noption11\noption12\noption13\noption14\noption15\noption16";
    static const char* dd2_options = "选项1\n选项2\n选项3\n选项4\n选项5\n选项6\n选项7\n选项8\n选项9\n选项10\n"
            "选项11\n选项12\n选项13\n选项14\n选项15\n选项16";
    static const char* dd3_options = "option1\noption2\noption3\noption4\noption5\noption6";

    lv_obj_t* dd1 = cet_general_dropdownlist_create(par, 120,
                                NULL, NULL, dd1_options);
    lv_obj_add_event_cb(dd1, dd_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_align_to(dd1, NULL, LV_ALIGN_TOP_LEFT, 0, 0);

    lv_obj_t* dd2 = cet_general_dropdownlist_create(par, 120,
                                NULL, NULL, dd2_options);
    lv_obj_align_to(dd2, NULL, LV_ALIGN_TOP_RIGHT, 0, 0);

    lv_obj_t* dd3 = cet_general_dropdownlist_create(par, 120,
                                NULL, NULL, dd3_options);
    lv_obj_add_event_cb(dd3, dd_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_align_to(dd3, NULL, LV_ALIGN_TOP_MID, 0, 0);

}

Screenshot and/or video

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

@kisvegabor It will be grateful if you can reply to me.

@embeddedt @kisvegabor can you do me a favor please?

1655695949538

as the gif show, when I open the ddlist , it hardly scroll up to the ‘option 1’

Thanks for the report. It was bug in LVGL indeed.

I’ve pushed a fix to master: