# Select-kit 问题在 RTL

**URL:** https://meta.discourse.org/t/select-kit-problem-in-rtl/163576
**Category:** Bug
**Created:** [2020年九月10日 05:39 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576 "2020-09-10T05:39:41Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [2020年九月10日 05:39 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/1 "2020-09-10T05:39:41Z")

</div>

在 RTL 模式下，Select-Kit 中打开的列表显示不正确。

**当前布局：**

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

```

**预期布局：**

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

```

我检查了代码，发现相关设置仅针对 LTR 模式。

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

并在以下位置使用：

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

我尝试通过添加一些 CSS 代码来解决该问题，但不幸的是，这引发了更多问题。我认为如果在页面为 RTL 时使用 `placement: "bottom-end"`，问题就能解决。

此外，这也导致在某些手机上打开的 popper 元素显示在屏幕外。如果需要，我可以通过私信发送一些问题截图给您。

---

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [2020年十月22日 08:30 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/3 "2020-10-22T08:30:29Z")

</div>

我们能否将此更改应用于我们的社区，还是必须由 Discourse 团队来应用此更改？

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [2020年十月22日 08:31 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/4 "2020-10-22T08:31:30Z")

</div>

是的，您需要等待更新，抱歉，我会尽快查看，修复应该很简单。

---

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [2020年十月22日 08:37 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/5 "2020-10-22T08:37:21Z")

</div>

感谢您的回复。您认为是否可以通过 JavaScript 来更改此类内容？我们正通过主题组件注入此更改，以临时解决该问题。

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [2020年十月22日 08:42 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/6 "2020-10-22T08:42:02Z")

</div>

一切皆有可能，但我不建议这样做，我稍后会查看。

---

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [2020年十月22日 08:46 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/7 "2020-10-22T08:46:24Z")

</div>

在宽度超过 1711px 的桌面设备上，这个问题在话题页面底部的通知设置中很容易看到。🙏

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [2020年十月22日 20:32 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/8 "2020-10-22T20:32:58Z")

</div>

我已在 master 分支上针对此问题提交了修复，请告诉我是否改善了您的情况。如果没有，请确保截取屏幕截图。

---

<div class="post-metadata">

### Author: ![nildarar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nildarar/32/331927_2.png) [@nildarar](https://meta.discourse.org/u/nildarar)
#### Post date: [2020年十月31日 06:38 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/9 "2020-10-31T06:38:47Z")

</div>

由于删除了 GIF 头像，我们不得不稍作延迟更新。事实证明，该问题已完全解决。

感谢 @j.jaffeux

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [2020年十月31日 08:48 UTC](https://meta.discourse.org/t/select-kit-problem-in-rtl/163576/10 "2020-10-31T08:48:59Z")

</div>