How do I stop the symbol being overlaid with the label text of a dropdown when closed

How-to
1

Description

By default when the dropdown list is closed and the selected items text is too long it obscures the dropdown symbol. This is when the symbol is on the right hand side.

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

It’s an embedded Linux system using an Atmel SAMA5D31

What LVGL version are you using?

8.3

What do you want to achieve?

I would like to clip the text to where the symbol starts.

What have you tried so far?

I’ve tried using right padding on LV_PART_MAIN, I’ve tried using a symbol with no transparency but then the focus colour gets lost and the symbol stands out. I’ve tried editing the dropdown list code to alter the size of the label’s area in draw_main which achieves what I want but the problem is that the long text is then wrapped onto multiple lines and you can’t read it.

Code to reproduce

you can modify the example code to reduce the width of the dropdown to see the issue.

##### startup script #####

#!/opt/bin/lv_micropython -i

import lvgl as lv

import display_driver


##### main script #####

#
# Create a drop down, up, left and right menus
#

opts = "\n".join([
    "Apple",
    "Banana",
    "Orange",
    "Melon",
    "Grape",
    "Raspberry"])

dd = lv.dropdown(lv.scr_act())
dd.set_options_static(opts)
dd.align(lv.ALIGN.TOP_MID, 0, 10)
dd = lv.dropdown(lv.scr_act())
dd.set_width(90)
dd.set_options_static(opts)
dd.set_dir(lv.DIR.BOTTOM)
dd.set_symbol(lv.SYMBOL.UP)
dd.align(lv.ALIGN.BOTTOM_MID, 0, -10)

dd = lv.dropdown(lv.scr_act())
dd.set_options_static(opts)
dd.set_dir(lv.DIR.RIGHT)
dd.set_symbol(lv.SYMBOL.RIGHT)
dd.align(lv.ALIGN.LEFT_MID, 10, 0)

dd = lv.dropdown(lv.scr_act())
dd.set_options_static(opts)
dd.set_dir(lv.DIR.LEFT)
dd.set_symbol(lv.SYMBOL.LEFT)
dd.align(lv.ALIGN.RIGHT_MID, -10, 0)

Then select Raspberry in the bottom dropdown list.

Screenshot and/or video

None.

2

I have managed to get the desired result by hacking draw_main in lv_dropdown.c to check the area for the text against the size of the text and reduce by 1 character until it fits, forcing it to use a buffer rather than dropdown->text.