lvgl: RTL DropDown layout is wrong

Perform all steps below and tick them with [x]

Check the related part of the Documentation
Update lvgl to the latest version
Reproduce the issue in a Simulator

Describe the bug

DropDown list part layout is wrong when configured to RTL

To Reproduce

options = "\n".join([
    "Apple",
    "Banana",
    "Orange",
    "Cherry",
    "Grape",
    "Raspberry",
    "Melon",
    "Orange",
    "Lemon",
    "Nuts"])

scr = lv.scr_act()
scr.set_style_base_dir(lv.BASE_DIR.RTL, 0)
dd = lv.dropdown(scr)
dd.set_width(150)
dd.set_options(options)
dd.align(lv.ALIGN.TOP_MID, 0, 20)
dd.open()

Link to online example

Expected behavior

Text should be aligned to the right, but layout should be corrected. Also, list scrollbar should be on the left.

Screenshots or video

RTL:

LTR:

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (22 by maintainers)

Commits related to this issue

fix(obj) fix lv_obj_align_to with RTL base direction Related to #2424 — committed to lvgl/lvgl by kisvegabor 3 years ago
fix(dropdown) fix list position with RTL base direction related to #2424 — committed to lvgl/lvgl by kisvegabor 3 years ago
feat(obj) place the scrollbar to the left with RTL base dir. Related to #2424 — committed to lvgl/lvgl by kisvegabor 3 years ago

Most upvoted comments

I did some research. There seems to be no clear standard when it comes to this, but several people have suggested following the most common design pattern, and leaving the scrollbar on the right.

Setting direction: rtl in Chrome does seem to leave the scrollbar on the right, although this may be a Linux issue and not a Chrome issue.