2011-11-09 6 views
1

私はjQuery Autocomplete pluginを使用しています。これは、提案が表示されたときに次のマークアップを生成します。jQuery UI - オートコンプリートで生成されたインラインスタイルのオーバーライド?

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16; width: 1355px; position: relative; top: -1615px; left: 40px; display: none; "> 
    <li class="ui-menu-item" role="menuitem"> 
     <a class="ui-corner-all" tabindex="-1">java</a> 
    </li> 
    <li class="ui-menu-item" role="menuitem"> 
     <a class="ui-corner-all" tabindex="-1">javascript</a> 
    </li> 
</ul> 

私の理解では、入力フィールドに関連し、それを配置するUI Positionプラグインを使用しています。しかし、内部ではstyle="z-index: 16; width: 1355px; position: relative; top: -1615px; left: 40px; display: none; "が生成されていますが、入力フィールドよりも幅がかなり長くなっています。 これはモジュールによって追加されたインラインスタイルなので、ui-autocompleteセレクタを使用してこれをオーバーライドすることはできません。何か案は?

+0

注:入力フィールドの幅は、「1140px」です。 –

答えて

3

!importantメソッドをCSSで使用します。例:

.ui-autocomplete { 
    width:200px !important; 
} 
+0

恐ろしい修正!私はタブのjQuery UIがインラインスタイルの幅を注入したIEと同じ問題を抱えていました。これは常にピクセルベースでした(他のすべてのブラウザはパーセントベースで正しい値でした)。私のCSSにあなたの提案した「重要な」フラグを付けて、IEは他のすべてのブラウザと同様に動作します...ありがとう! – Jeach

+0

@Jeachそれがあなたを助けてくれて良かったです。あなたは、最後の可能な選択肢のこの方法をどのように考えなければなりません。それは最も苦痛なCSSデバッグの1つにあなたを置くことができるからです。 – andlrc

+0

チップをありがとう!しかし、好奇心の中で、あなたはIE上でなぜピクセル値(それは広すぎて状況を悪化させる)と他のすべてのブラウザを注入するのかを知っていますか? – Jeach

関連する問題