选择方向rtl水平滚动问题

Question

当页面方向设置为'rtl;它创建水平滚动。我使用过选择的插件。它会产生不必要的“左：-9999px;”为“选择下降”div类。请帮我解决这个问题。

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;
}

使用＆＃34; chosen.css＆＃34;查找并更改此内容文件。但是＆＃34;左：-9999px;＆＃34;应更改为＆＃34; left：9999px;＆＃34;

Answer 2

确保当您的页面是RTL时，您还可以将所选的选项配置为RTL。正如https://harvesthq.github.io/chosen/中提到的那样

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

如果您的所有选择都是rtl，则可以在致电chosen-rtl之前向他们添加chosen：

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

比调整组件css要好得多;）

Answer 3

将def alphabetize(arr, rev = false) if rev x = arr.sort! x.reverse! else arr.sort! end end animals = ["Alligator", "Cat", "Elephant", "Dog", "Bear"] alphabetize(animals, true) 更改为left:-9000和display:none中的chosen.css。这是Chosen的一个已知问题。 它对我很有用。

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

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

Answer 4

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

const TestPage= React.lazy(() => import('../../pages/Test'));