实现修改 jQuery Chosen下 拉框的背景的高度

  在实际的开发中，遇到比较苦逼的事情是，同事开发的系统中下拉框（chosen）展开后，一部分内容被背景（iframe）遮盖了，导致一些选项不能选择，这个问题抛给我，确实浪费了些宝贵的时间，，，

---

chosen 效果图

问题截图：

---

bower_components目录下的插件包下chosen目录结构如下：

# Chosen

Chosen is a library for making long, unwieldy select boxes more user friendly.

- jQuery support: 1.4+
- Prototype support: 1.7+

...

---

那么问题该怎么解决呢？

---

解决思路：

• 通过修改 iframe 的高度（背景通过 iframe 相关样式设置实现）
• 通过修改 Dialog 的高度（背景通过 Dialog 相关样式设置实现）
• 最后，也就是通过修改Chosen插件包的相关样式设置

---

问题解决办法：

• 调整chosen CSS相关设置(chosen.css)

/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.6.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2016 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/

... 

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  color: #444;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 70px;
  -webkit-overflow-scrolling: touch;
}

...

• 调整 相关页面的代码

...

style="margin-top: 60px; margin-bottom: 60px;"

...

插叙：

• 不要笑我修改的方式，确实也受到技术的限制（有些东西不懂），这是我实现的方式，多多分享，谢谢！