jquery - 选择 Harvesthq 动态调整宽度

Question

你怎么能有一个动态宽度样式的harveshq 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%，并相应地调整大小。如果您需要它为其他宽度，请更改百分比或用另一个元素封装选择本身，然后在该元素上设置宽度。

Answer 5

我有一个响应式表单，它有很多带有媒体查询的 CSS 规则!important，等等，并且使用类继承选项进行选择。在调整大小时，选择的 css 和父 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);

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

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

同样，这只是 MSánchez 回答的基础！谢谢

Answer 7

我在 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 8

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

<select chosen width="'100%'" ... ></select>

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

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

这是我这样做的简单原因。

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

和里面 document.ready

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

其中 dropdown 是下拉列表的 id。您还可以在更改事件时设置宽度减小。#dropdown_chosen 通过以下方式创建：

dropdown - 您的下拉列表 ID 附加 _chosen