このui-select要素のスタイルシートを変更するにはどうすればいいですか？ （角）

Question

私は、ui-select要素を使って小さなプログラムを作成しました。問題は、検索バーが実際には長すぎて、私はそれを減らす方法を見つけられなかったということです。通常、私たちはあなたのために変更することができるいくつかの "幅"プロパティを持っていますが、CSSコードが複雑すぎて、それを管理する方法が見つかりませんでした。私がしたいのは、同じ行に3つのバーを保存することです。

...私は、UI選択の公式ページからのサンプルをコピーし、それは私が理解していなかったと私はCSSやブートストラップについて多くを知らないCSSで多くのことを含んでいますindex.htmlをで

スタイル要素はこの1つである：

<style> 
    body { 
     padding: 15px; 
    } 

    .select2 > .select2-choice.ui-select-match { 
     /* Because of the inclusion of Bootstrap */ 
     height: 29px; 
    } 

    .selectize-control > .selectize-dropdown { 
     top: 36px; 
    } 
    </style> 
</head> 

そして、彼らはあなたが私のplunkerで見つけることができ、そのサンプル中の巨大なselect.cssファイルが含ま：http://plnkr.co/edit/kuryoI5osBtRihYAeoVH?p=preview

• をあなたはshにできますどのように私は検索バーの幅を減らすことができますか？
• 私の例で使用されていないプランナーに含まれているselect.cssから不要な行をすべて削除する方法を教えてください。私はそれをいかに効率的に行うことができるかわかりません。私は重要な要素を削除することを恐れていると私は本当にその巨大なCSSファイルで失われてしまった。

ありがとうございます！

Answer 1

ブートストラップで編集2（COL-XX-NNを使用する方法）の特性

XXは、プロパティを適用したいどのビューで示します

XS：超小型デバイス

SM：小型デバイス

はをmdの：

LG媒体デバイス：LGデバイス

NNを（合計12である）要素が占有するどのように多くの列を示しています。詳細な文書は、http://getbootstrap.com/getting-started/をご覧ください。

そして、これはあなたのコードは次のようになり方法です...

<div class="row"> 
    <!--First ui-select--> 
    <div class="col-md-4"> <!--1/3 of 12 --> 
     <ui-select ng-model="selectedItem"> 
     <!--ui-content-here---> 
     </ui-select> 
    </div> 
    <!--Second ui-select--> 
    <div class="col-md-4"> <!--1/3 of 12 --> 
     <ui-select ng-model="selectedItem"> 
     <!--ui-content-here---> 
     </ui-select> 
    </div> 
    <!--Third ui-select--> 
    <div class="col-md-4"> <!--1/3 of 12 --> 
     <ui-select ng-model="selectedItem"> 
     <!--ui-content-here---> 
     </ui-select> 
    </div> 
</div> 

編集

カスタムCSSを含めると、これらのルールを置きます。そのルールを上書きするために、UI選択cssファイルの後にこれを必ず含めてください：

.ui-select-container { 
    max-width: 200px; /*put the desired width here!*/ 
} 

.ui-select-bootstrap > .ui-select-match > .btn { 
    max-width: 200px; /*put the desired width here!*/ 
} 

.ui-select-bootstrap > .ui-select-choices { 
    max-width: 200px; /*put the desired width here!*/ 
    overflow-x: scroll; 
} 

.ui-select-container .form-control { 
    max-width: 200px; /*put the desired width here!*/ 
} 

このplunkerではルールがmyOwnCss.cssファイルであると私は別のものを追加するために必要なこの作業plunkerにhttp://plnkr.co/edit/GN8i5PeFebS7Bo04GiUt?p=preview

をチェックカスタムルールは、これを適切に行うためには、いくつかの他のデフォルトのスタイリングのUI選択します。下記を参照

/**some additional styling in order to get 
the demonstration working properly (very possibly not needed for you)*/ 
.ui-select-bootstrap .ui-select-choices-row.active > a { 
    color: black; 
    background-color: white; 
} 

重要！：

• してください、あなたは（それが 、この場合にはあなたが必要以上の幅、200pxのを取る）が長すぎる名前のオプションを持っている場合、それは選択されたオプションに完全に ショーではありませんので注意してくださいまた、 X軸をスクロールして、ドロップダウンメニュー に完全に読み込まなければなりません。
• ui-selectアイテムを作成すると、すべてのコンテンツのdivが生成され、3つのバーが表示されます。これらのdivはおそらく他のものの下に表示されます。 （TIP：あなたは、この使用してブートストラップクラス解決することができます：すべてのUIの選択をラップし、すべてのdivのためcol-md-4）