选择Harvesthq的动态调整宽度大小

Question

如何在具有动态宽度样式的harvesthq Chosen下拉列表中进行选择？

默认情况下，它具有固定的宽度，如果您尝试使用CSS进行修改，则会遇到多个问题以达到良好的结果。

- MSánchez

Answer 1

这篇博客推荐以下内容：

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

- Vinay Raghu

---

我有那个设置，但它不会根据容器大小调整大小：http://stackoverflow.com/questions/26425643/how-to-resize-a-chosen-jquery-dropdownlist-on-windows-resize - SearchForKnowledge

此设置不支持动态宽度，除非您重新加载页面。它不是响应式的。 - Mark

我认为调整ChosenSelect大小的问题在于首先使用JavaScript处理大小。如果可能的话，我强烈建议在CSS中控制宽度（在这种情况下是可能的）。 - Tormod Haugene

感谢博客中提到 https://stackoverflow.com/users/2327634/vinay-raghu。我发现的这个解决方案已经有几年了，所以请查看 Chosen 的文档以获取更多信息。但它所做的只是将其宽度设置为 100% 内联。当然，无论容器在哪里，都需要对其进行响应式设计，根据 Tormod 的评论。 - Nathaniel Flick

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。请不要对历史上有效的答案进行负面评价。

- Vladimir Jovanović

---

$(window).on("resize", function() { $(".chosen-container").each(function() { $(this).attr("style", "width: 100%"); }); }); 这段代码的作用是当窗口大小被调整时，将所有类名为"chosen-container"的元素宽度设置为100%。 - johnebri

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。

就是这样！

- MSánchez

---

你是否有解决方案可以提供给我？http://stackoverflow.com/questions/26425643/how-to-resize-a-chosen-jquery-dropdownlist-on-windows-resize - SearchForKnowledge

@SearchForKnowledge：也许移除已选择的DOM并重新附加（请参见下面我的答案）对您有帮助？ - workwise

Answer 4

虽然上面部分已经提到过，但是我想强调以下解决方案:

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

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

- Tormod Haugene

Answer 5

在@MSánchez的回答基础上，我写了以下内容，更加通用，不涉及任何ID：

function processChosenContainer(myme) {
    myme.innerWidth(myme.parent().innerWidth() - 30);
}

function processChosenSearch(myme) {
    myme.innerWidth(myme.parent().parent().parent().innerWidth() - 13);
}

function processChosenDrop(myme) {
    myme.innerWidth(myme.parent().parent().innerWidth() - 32);
}

window.addEventListener("resize", function () {
    //******Adjust Container Width********/
    var myObj = $('.chosen-container');
    myObj.each(function () {
        processChosenContainer($(this));
    });
    //******Adjust input search Width********/
    var myObj2 = $('.chosen-search input');
    myObj2.each(function () {
        processChosenSearch($(this));
    });
    //******Adjust drop Width********/
    var myObj3 = $('.chosen-drop');
    myObj3.each(function () {
        processChosenDrop($(this));
    });
}, false);

还要将以下内容添加到选择元素“chosen-select-responsive”中：

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

再次强调，这只是对MSánchez答案的补充！谢谢。

- Reem

Answer 6

我有一个响应式表单，其中包含许多带有媒体查询、!important等的CSS规则，并使用了继承选项的chosen。在调整大小时，chosen和父级css之间经常发生冲突，导致出现问题。我想出了一个对我有效的简单解决方案：在每次窗口调整大小时重新创建chosen dom：

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


function doResize() {
     // Parent website's code, that would also reorganize select elements on the page
    jQuery("select.my-select").removeAttr("style"); // Remove display:none style added by chosen
    jQuery("select.my-select").removeClass("chzn-done"); // Remove chzn-done class added by chosen

    jQuery(".chzn-container").remove();
    jQuery("select.my-select").chosen({
                 width: '100%',
                 disable_search_threshold: 10,
                 inherit_select_classes : true
               });
}

- workwise

Answer 7

我正在使用MVC5开发一个应用程序。

以下是我的做法：

在.chosen-container类中，我添加了以下内容： width: 100% !important; // 假设它已经是100% max-width: 280px; // 这是bootstrap form-control-class的最大宽度 min-width: 0px; // 它可以为0
它的宽度可以从0到280像素，并且我假设宽度为100%。

这对我来说完全响应。

- Francisco Rosa

Answer 8

这是我做的简单方法。

JS：

// Create Chosen Select Menus
setUpSelectMenus();

// Reset Chosen Select Menus when window changes size
window.addEventListener( "resize", function() { setUpSelectMenus(); } );

/**
 * Settings for Default Chosen Select Menus
 */
function setUpSelectMenus(){

    $( '.chosen-select' )
        .chosen( "destroy" ) // Need this to make responsive
        .chosen(
            {
                allow_single_deselect   : true,
                disable_search_threshold: 10
            }
        );
}

- Braeden

Answer 9

我使用的方法是使用inherit_select_class。

HTML

<select class="input-xxlarge" />

JS

jQuery("[data-chosen]").chosen({
  inherit_select_classes : true
});

CSS

.input-xxlarge {
  width:530px;
  max-width: 100%;
}

- M Kaweepatt Churcharoen

---

请在HTML中添加data-chosen属性以使其可运行。 - M Kaweepatt Churcharoen

Answer 10

我用这个快速片段修复了它

 $(window).resize(function() {
  $(".chosen-select").chosen('destroy') ;
  $(".chosen-select").chosen() ;
 });

当然，有更优雅的处理方式。但这个方法可行。

- Remy Houard