實作修改 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;"

...      

• 不要笑我修改的方式，确實也受到技術的限制（有些東西不懂），這是我實作的方式，多多分享，謝謝！