选择collecthq动态调整宽度 [英] Chosen harvesthq resize width dynamically

问题描述

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

解决方案

我只想分享我的解决方案，了解如何在屏幕上调整所选的下拉宽度调整大小：

首先你必须在你的CSS上添加这个样式：

  #form_paciente {
 width：100％！important; 
} 
  

其中*＃form_paciente *是您的选择ID。

之后在您的视图中添加此脚本：

  window.addEventListener（resize function（）{
 $（'。chzn-container'）。innerWidth（$（'＃selecciona_paciente_estadisticas_form'）。innerWidth（））; 
 $（'。chzn-search input' $（'＃selecciona_paciente_estadisticas_form'）innerWidth（） -  12）; 
 $（'。chzn-drop'）。innerWidth（$（'＃selecciona_paciente_estadisticas_form'）。innerWidth（） -  2）; 
 }，false）; 
  

在这种情况下*＃selecciona_paciente_estadisticas_form *是*＃form_paciente *

的父表单

这就是全部！

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.

解决方案

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:

#form_paciente{
    width: 100% !important;
}

Where *#form_paciente* is your selection 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*

That's all!

这篇关于选择collecthq动态调整宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！