选择的harvesthq动态调整宽度

Question

如何使用动态宽度样式来选择harvesthq的下拉列表？

默认情况下，它有一个固定的宽度，如果你试图用CSS修改它，你会有几个问题来达到一个好的结果。

Answer 1

我只想分享我的解决方案，如何在调整屏幕尺寸时调整所选下拉宽度的大小：

首先，你必须在你的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 2

This blog建议执行以下操作：

$(“select”)宽度({.chosen：'100%‘})；//宽度，单位为px，%，em等

Answer 3

这对我来说很有效，即使屏幕上有多个选择框：

​

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

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

​

2019年。编辑:请记住，这个答案是在4年前当jQuery还是一个流行的库并且被广泛使用时做出的。我的建议是今年以后生产的所有产品都使用纯JS。不要重复历史上的答案，因为它们在编写时是有效的。