Question

如何使用动态宽度样式获得harvesthq Chosen下拉列表？

默认情况下，它具有固定的宽度，如果您尝试使用CSS修改它，您将遇到一些问题以达到良好的效果。

Answer 1

This blog建议如下：

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

Answer 2

这个对我有用，即使屏幕上有多个选择框：

＆＃13;

$(document).ready(function(){      
   resizeChosen();
   jQuery(window).on('resize', resizeChosen);
});

function resizeChosen() {
   $(".chosen-container").each(function() {
       $(this).attr('style', 'width: 100%');
   });          
}

＆＃13;

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％，并相应地调整大小。如果你需要它是一些其他宽度，更改百分比或用另一个元素封装select本身，并改为在该元素上设置宽度。

Answer 5

我有一个响应式表单，它有很多带有媒体查询的CSS规则，!important等，并且正在使用选择的类继承选项。在调整大小时，选择和父css之间经常会发生冲突，事情就会破裂。我想出了一个对我有用的简单解决方案：在每个窗口重新调整大小时重新选择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
               });
}

Answer 6

在@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);

还添加到select元素“selected-select-responsive”，如下所示：

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

同样，这只是MSánchez答案的积累！日Thnx

Answer 7

只需在单引号内使用百分比宽度：

CalendarView

使用此技术选择的响应可以在这里看到：http://plnkr.co/edit/RMAe8c?p=preview

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

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

Answer 10

我已经修复了这个简短的片段

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

允许有更多优雅的方式来处理它。但这有效。

Answer 11

我正在用MVC5开发应用程序。

这是我所做的：

在我添加的.chosen-container类中


    width: 100% !important; // Assume that it is already 100%
    max-width: 280px; // It is the max-width of bootsrap form-control-class
    min-width: 0px; // It can go to 0

它可以从0到280像素，我认为宽度是100％。

这对我完全有效。

Answer 12

对我来说，真正起作用的是：

function resizeChosen() {
    var chosen = $("#dropdown_chosen");
    var max = chosen.parent().width();
    var currentWidth = chosen.width();
    var now = currentWidth + 20 / 100 * currentWidth;

    if (now <= max) {
        $("#dropdown_chosen").attr('style', "width: " + now + "px");
    }
}

and inside document.ready

dropdown.chosen().change(function() {
    resizeChosen();
});

其中dropdown是下拉列表的ID。您还可以在更改事件上设置宽度减少。 #dropdown_chosen的创建方式如下：

下拉列表 - 您的下拉列表ID 追加_chosen

选择harvesthq动态调整宽度

12 个答案: