选择 Harvesthq 动态调整宽度

Posted 2023-05-07

【中文标题】选择 Harvesthq 动态调整宽度

【英文标题】：Chosen harvesthq resize width dynamically

【发布时间】：2013-06-02 09:05:27

【问题描述】：

你怎么能有一个具有动态宽度样式的 Harvethq Chosen 下拉菜单？

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

【参考方案1】：

This blog 建议如下：

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

【讨论】：

我有那个设置，但它不会根据容器调整大小：***.com/questions/26425643/…

此设置不适应动态宽度，除非您重新加载页面。它没有响应。

我认为调整 ChosenSelect 大小的问题在于，大小首先是在 javascript 中处理的。我强烈建议尽可能控制 CSS 中的宽度（在这种情况下是可能的）。

感谢***.com/users/2327634/vinay-raghu 的博客。我发现的这个解决方案已有几年的历史，因此请查看选择的文档以获取更多信息。但它所做的只是将其宽度设置为 100% 内联。当然，根据 Tormod 的评论，它所在的任何容器都需要对此做出响应。

【参考方案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。不要否定在编写它们时有效的代表历史答案。

【讨论】：

一行$(window).on("resize", function() $(".chosen-container").each(function() $(this).attr("style", "width: 100%"); ); );

【参考方案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

就是这样！

【讨论】：

你有什么解决办法吗？ ***.com/questions/26425643/…

@SearchForKnowledge：也许删除选定的 Dom 并重新附加（请参阅下面的答案）对您有用？

【参考方案4】：

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

.chosen-container 
    width: 100% !important;

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

【参考方案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
               );

【参考方案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 的回答的基础！谢谢

【参考方案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%。

这完全符合我的要求。

【参考方案8】：

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

<select chosen  ... ></select>

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

【参考方案9】：

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

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

【参考方案10】：

我使用的方式是使用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%;

【讨论】：

请将 data-chosen 属性放入 html 中以使其可运行。

【参考方案11】：

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

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

当然，还有更优雅的方式来处理它。但它有效。

【参考方案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 追加_选择