选择的方向 rtl 水平滚动问题

Question

当页面方向设置为'rtl;它创建水平滚动。我使用了选择的插件。它为 "chosen-drop" div class 创建不需要的 "left: -9999px;"。请帮我解决这个问题。

Answer 1

.chosen-container .chosen-drop {
    position: absolute;
    top: 100%;
    left: 9999px;
    z-index: 1010;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border-top: 0;
    background: #d1d0d0;
}

使用您的 "chosen.css" 文件查找并更改它。但是 "left: -9999px;" 应该改为 "left: 9999px;"

Answer 2

确保当您的页面为 RTL 时，您还将所选内容配置为 RTL。如https://harvesthq.github.io/chosen/中所述尝试

<select class="chosen-select chosen-rtl">

如果您所有的选择都是 rtl，您可以在调用 chosen 之前将它们全部添加 chosen-rtl 做这样的事情：

$('select:visible').addClass("chosen-rtl");
$('select:visible').chosen();

这比调整组件要好得多 css ;)

Answer 3

将 chosen.css 和 jquery.chosen.j 中的 left:-9000 更改为 display:none。这是 Chosen 的一个已知问题。它对我来说效果很好。

https://github.com/harvesthq/chosen/issues/447

https://github.com/woothemes/woocommerce/issues/3386

Answer 4

我尝试了以下自定义 css，它对我有用

html{
direction:ltr;
}

选择的方向 rtl 水平滚动问题

chosen direction rtl horizontal scroll issue

html

css

jquery-chosen