选择harvesthq动态调整宽度

Question

你怎么能有一个动态宽度风格的harvesthq Chosen下拉菜单？

默认情况下,它具有固定的宽度,如果您尝试使用CSS修改它,您将遇到几个问题以达到良好的结果.

Answer 1

此博客推荐以下内容:

$("select").chosen({ width: '100%' }); // width in px, %, em, etc

Answer 2

这个对我有用,即使屏幕上有多个选择框:

$(document).ready(function(){      
   resizeChosen();
   jQuery(window).on('resize', resizeChosen);
});

function resizeChosen() {
   $(".chosen-container").each(function() {
       $(this).attr('style', 'width: 100%');
   });          
}

2019年编辑:请记住,这个答案是在4年前制作的,当时jQuery是受欢迎的库,当它被广泛使用时.我的建议是在今年之后使用纯JS.不要回答在他们写作时起作用的历史答案.

Answer 3

我只是想分享我的解决方案,关于如何在屏幕调整大小上调整所选下拉宽度的大小:

首先,你必须在你的CSS上添加这种风格:

#form_paciente{
    width: 100% !important;
}

其中*#form_paciente*是您的选择ID.

之后,在您的视图上添加此脚本:

window.addEventListener("resize", function() {
    $('.chzn-container').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth());
    $('.chzn-search input').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-12);
    $('.chzn-drop').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-2);  
}, false);

在这种情况下*#selecciona_paciente_estadisticas_form*是*#form_paciente*的表格父ID

就这样!

Answer 4

虽然上面提到了一部分，但我想指出以下解决方案：

.chosen-container {
    width: 100% !important;
}

这样您选择的小部件将始终为 100%，并相应地调整大小。如果您需要它是其他宽度，请更改百分比或用另一个元素封装选择本身，并在该元素上设置宽度。