Select-kit problem in RTL

bug
#1

The list opened in Select-Kit is not displayed correctly in RTL.

Current layout:

+--------+
| target |
+-------------+
|             |
|   popper    |
|             |
+-------------+

Expected layout:

     +--------+
     | target |
+-------------+
|             |
|   popper    |
|             |
+-------------+

I checked the code and saw that the settings are only for LTR.

https://github.com/discourse/discourse/blob/52672b9eabccb1184d85dc7f08062d5a7c18cb73/app/assets/javascripts/select-kit/addon/components/select-kit.js#L272

And used here:

https://github.com/discourse/discourse/blob/52672b9eabccb1184d85dc7f08062d5a7c18cb73/app/assets/javascripts/select-kit/addon/components/select-kit.js#L779

I tried to solve the problem by adding some CSS codes, but unfortunately, this causes more problems. I think if we use placement: "bottom-end" when the page is RTL, the problem will be solved.

Also, this has caused the opened poppers to be displayed off-screen on some mobile phones. If you need, I can send you some screenshots of the problem in a pm.

1 Like
#3

Can we apply this change to our community or must the change be applied by the Discourse team?

#4

Yes you need to wait for a change, sorry, will try to have a look soon, should be trivial to fix.

1 Like
#5

Thank you for your response
Do you think it is possible to change such a thing through JavaScript? As we inject this change through a theme component to temporarily solve the problem.

#6

Everything is possible but I wouldn’t recommend it, I will have a look shortly.

1 Like
#7

On desktops larger than 1711px, this problem is easily seen in the notification settings at the end of the topic page. :pray:

1 Like
#8

I pushed a fix on master for this, let me know if it improves the situation for you. If not please make sure you take a screenshot.

5 Likes
#9

Due to the deletion of the gif profile pictures, we had to update with a slight delay. As it turns out, this problem is completely solved.

Thanks @joffreyjaffeux

2 Likes
#10