jQuery 选择的收割机动态调整宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16960690/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chosen harvesthq resize width dynamically
提问by MSánchez
How can you have a harvesthq Chosen dropdown with a dynamic width style?
你怎么能有一个具有动态宽度样式的收割选择下拉菜单？
By default it has a fixed width and if you try to modify it with CSS you will have several problems to reach a good result.
默认情况下它有一个固定的宽度，如果你尝试用 CSS 修改它，你会遇到几个问题才能达到一个好的结果。
采纳答案by MSánchez
I just want to share my solution about how to resize chosen dropdown width on screen resize:
我只想分享我关于如何在屏幕调整大小时调整所选下拉宽度的解决方案：
Firstly you have to add this style on your css:
首先，您必须在 css 中添加此样式：
#form_paciente{
width: 100% !important;
}
Where *#form_paciente* is your selection ID.
其中 *#form_pacciente* 是您的选择 ID。
After that add this script on your view:
之后在您的视图中添加此脚本：
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);
In that case *#selecciona_paciente_estadisticas_form* is the form parent ID of *#form_paciente*
在这种情况下 *#selecciona_paciente_estadisticas_form* 是 *#form_paciente* 的表单父 ID
That's all!
就这样！
回答by Vinay Raghu
回答by Vladimir Jovanovi?
this one worked for me, even with multiple select boxes on the screen:
这个对我有用，即使屏幕上有多个选择框：
$(document).ready(function(){
resizeChosen();
jQuery(window).on('resize', resizeChosen);
});
function resizeChosen() {
$(".chosen-container").each(function() {
$(this).attr('style', 'width: 100%');
});
}Year 2019. edit: Bear in mind that this answer was made 4 years ago when jQuery was popular library and when it was widely used. My advice is to use pure JS for everything made after this year. Don't neg rep historical answers that worked at the time they were written.
2019 年。编辑：请记住，这个答案是在 4 年前 jQuery 成为流行库并且被广泛使用的时候做出的。我的建议是在今年之后制作的所有东西都使用纯 JS。不要否定在编写它们时有效的代表历史答案。
回答by Tormod Haugene
Although partly mentioned above, I would like to point out the following solution:
虽然上面提到了一部分，但我想指出以下解决方案：
.chosen-container {
width: 100% !important;
}
This way your chosen widget will always be 100%, and resize accordingly. If you need it to be some other width, change the percentage or encapsulate the select itself with another element, and set the width on that element instead.
这样您选择的小部件将始终为 100%，并相应地调整大小。如果您需要它是其他宽度，请更改百分比或用另一个元素封装选择本身，并在该元素上设置宽度。
回答by workwise
I had a responsive form, which had lot of CSS rules with media queries, !important, etc and was using chosen with class inheritance option. On resizing, there were often conflicts between chosen and parent css and things would break. I came up with a simple solution that worked for me: recreate chosen dom on every window resize:
我有一个响应式表单，它有很多带有媒体查询的 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
});
}
回答by Reem
Building on @MSánchez's answer, I wrote the following to be more generic without referring to any IDs:
以@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);
Also add to the select element "chosen-select-responsive" which is as follows:
还添加到选择元素“chosen-select-responsive”，如下所示：
.chosen-select-responsive {
width: 100% !important;
}
Again, this is only a build-up on MSánchez's answer! thnx
同样，这只是 MSánchez 答案的补充！谢谢
回答by Bernardo Ramos
Just use width in percentage within single quotes:
只需在单引号内使用百分比宽度：
<select chosen width="'100%'" ... ></select>
A responsive chosen using this technique can be seen here: http://plnkr.co/edit/RMAe8c?p=preview
可以在此处看到使用此技术选择的响应式：http: //plnkr.co/edit/RMAe8c?p=preview
回答by Braeden
Here is the simple why I did it.
这是我这样做的简单原因。
JS:
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
}
);
}
回答by M Kaweepatt Churcharoen
The way I use is to use inherit_select_class.
我使用的方式是使用inherit_select_class。
HTML
HTML
<select class="input-xxlarge" />
JS
JS
jQuery("[data-chosen]").chosen({
inherit_select_classes : true
});
CSS
CSS
.input-xxlarge {
width:530px;
max-width: 100%;
}
回答by Remy Houard
I fixed with this quick sniplet
我用这个快速的片段修复了
$(window).resize(function() {
$(".chosen-select").chosen('destroy') ;
$(".chosen-select").chosen() ;
});Granted there are more elegant ways to handle it. But it works.
当然有更优雅的方法来处理它。但它有效。
