如何在具有动态宽度样式的harvesthq Chosen下拉列表中进行选择?
默认情况下,它具有固定的宽度,如果您尝试使用CSS进行修改,则会遇到多个问题以达到良好的结果。
如何在具有动态宽度样式的harvesthq Chosen下拉列表中进行选择?
默认情况下,它具有固定的宽度,如果您尝试使用CSS进行修改,则会遇到多个问题以达到良好的结果。
这篇博客推荐以下内容:
$("select").chosen({ width: '100%' }); // width in px, %, em, etc
$(document).ready(function(){
resizeChosen();
jQuery(window).on('resize', resizeChosen);
});
function resizeChosen() {
$(".chosen-container").each(function() {
$(this).attr('style', 'width: 100%');
});
}
2019年。编辑:请记住,这个答案是4年前写的,当时jQuery是流行的库,被广泛使用。我的建议是在这一年之后制作的所有内容都使用纯JS。请不要对历史上有效的答案进行负面评价。
我希望分享一下如何在屏幕大小改变时调整选择下拉框宽度的解决方案:
首先,您需要在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);
虽然上面部分已经提到过,但是我想强调以下解决方案:
.chosen-container {
width: 100% !important;
}
这样,您选择的小部件将始终保持100%,并相应地调整大小。如果您需要它成为其他宽度,请更改百分比或使用另一个元素封装选择本身,并在该元素上设置宽度。
在@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答案的补充!谢谢。
我有一个响应式表单,其中包含许多带有媒体查询、!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
});
}
.chosen-container
类中,我添加了以下内容:
width: 100% !important; // 假设它已经是100%
max-width: 280px; // 这是bootstrap form-control-class的最大宽度
min-width: 0px; // 它可以为0
它的宽度可以从0到280像素,并且我假设宽度为100%。这是我做的简单方法。
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
}
);
}
<select class="input-xxlarge" />
JS
jQuery("[data-chosen]").chosen({
inherit_select_classes : true
});
CSS
.input-xxlarge {
width:530px;
max-width: 100%;
}
我用这个快速片段修复了它
$(window).resize(function() {
$(".chosen-select").chosen('destroy') ;
$(".chosen-select").chosen() ;
});
当然,有更优雅的处理方式。但这个方法可行。