下拉选择导致水平自动滚动

Question

我有一个div和一个表。里面的div有下拉菜单。 div可以水平滚动。 我在下拉列表中使用了以下工具。

Harvesthq Chosen

现在这里有一块。

在图像1中，您可以看到我已经将水平滚动条带到了它的末尾。现在我选择了一个下拉列表，看看发生了什么。

图像2是结果。横杠开始了。我不希望这样。 我希望将条形图放置在选择之前的确切位置。此水平条位于div内 width:200%和主正文是width:100%

一个下拉列表的代码：

<select data-placeholder="" class="chzn_class eighty_percent" name="currency_id_1" id="currency_id_1">
    <option value=""></option>
    <option value="0">None</option>
</select>

谁能告诉我有什么问题？我该如何解决这个问题？

Fiddle

Exact problem

Answer 1

基于你的小提琴，我注意到如果我从初始化javascript中删除禁用搜索设置，那么问题就会消失。

$('.chosen-select').chosen();

但这会显示搜索框显示的新问题！因此可以使用一点css来隐藏搜索框。

.chosen-search { display: none; }

我从未使用 harvesthq ，但我猜测该选项会在给定数量少于您的情况下隐藏搜索功能（在您的情况下为10）。

所以也许复制这个功能你不能硬编码上面的css，而是使用javascript动态隐藏搜索框。即测试option元素的数量，然后找到.chosen-search元素和.hide()元素。

所以不包含样式.chosen-search { display: none; } 并使用它：

$('.chosen-select').chosen();

var disable_search_threshold = 10;
$('.chosen-select').each(function (index, element) {
    var $select = $(element);
    if ($select.find('option').length < disable_search_threshold) { 
        $select.next('div').find('.chosen-search').hide();
    }
});

FIDDLE

Answer 2

尝试添加overflow-y：hidden;属性和宽度：100％。 如果这不起作用，请尝试删除width和height属性并添加overflow：scroll;财产到div。

如果你提供jsfiddle参考，我可以帮助更好。