选择harvesthq动态调整宽度
你怎么能有一个动态宽度风格的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%'); }); }
我只是想分享我的解决方案，关于如何在屏幕resize上调整所选下拉宽度的大小：
首先，你必须在你的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
就这样！
我有一个响应式表单，它有很多CSS规则与媒体查询， !important等等，并使用选择与类inheritance选项。 在resize时，选择和父css之间经常会发生冲突，事情就会破裂。 我想出了一个适合我的简单解决方案：在每个窗口resize时重新创建所选的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 }); }
在@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
虽然上面部分提到过，但我想指出以下解决方案：
.chosen-container { width: 100% !important; }
这样，您选择的小部件将始终为100％，并相应地resize。 如果您需要它是其他宽度，请更改百分比或使用另一个元素封装选择本身，并在该元素上设置宽度。
只需在单引号内使用百分比宽度：
使用此技术选择的响应可以在这里看到： http ： //plnkr.co/edit/RMAe8c？p = preview
这就是为什么我这样做的简单原因。
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 } ); }
我使用的方法是使用inherit_select_class。
HTML
JS
jQuery("[data-chosen]").chosen({ inherit_select_classes : true });
CSS
.input-xxlarge { width:530px; max-width: 100%; }
对我来说，它真正起作用的是：
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的创建方式如下：
下拉列表 - 您的下拉列表附加_chosen