ui-bootstrapドロップダウンメニューの行ごとに2つの項目

Question

anglejsとui-bootstrapだけを使用してWebアプリケーション用のドロップダウンメニューを作成しようとしています。メニューは、デスクトップアプリケーションに表示されるメニューに似ています。メニューには左揃えのラベルが表示され、ホットキーのリマインダーテキストは右揃えにし、同じ行に表示されます。私はこのような何かを探しています：

http://imgur.com/WevtfId

ドロップダウンボタンは、構成のようなツールバーに座っインライン要素にする必要があります。再利用のためのコンポーネントを作成しています。各ドロップダウンメニューはオブジェクトによってサポートされているため、メニュー幅はドロップダウン内の最長行の長さに適した方法で拡大縮小する必要があります。

は、ここで私はplunkerで一緒に投げたいくつかの例です：https://plnkr.co/edit/RAMgcuVoibeLkHTz4Z3e?p=preview

例1.Aは、基本的な問題を示しています。ドロップダウンリストの最初のスパンが長くなると、2番目のスパンが次のラインに置き換えられます。

<span class="example-inline" uib-dropdown> 
    <button type="button" class="btn btn-primary" uib-dropdown-toggle> 
    A. Autowidth Dropdown 
    </button> 
    <ul class="dropdown-menu" uib-dropdown-menu> 
     <li ng-repeat="item in ctrl.items"> 
     <a> 
      <span style="float:left">{{item.label}}</span> 
      <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span> 
     </a> 
     </li> 
    </ul> 
    </span> 

例2.Aには、正しく動作するドロップダウンがあります。残念ながら、uib-dropdownディレクティブをブロック要素に付加する必要がありました。つまり、余分な作業をせずにツールバーにうまく収まりません。

<span class="example-block" uib-dropdown> 
    <button type="button" class="btn btn-primary" uib-dropdown-toggle> 
    A. Autowidth Dropdown 
    </button> 
    <ul class="dropdown-menu" uib-dropdown-menu> 
     <li ng-repeat="item in ctrl.items"> 
     <a> 
      <span style="float:left">{{item.label}}</span> 
      <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span> 
     </a> 
     </li> 
    </ul> 
    </span> 

.example-block { 
    padding: 5px 20px; 
    display: block; 
} 

例1.Dでは、ドロップダウンメニューにテーブルを挿入します。これは、私が望むが、私の既存の機能のより大きなリファクタを必要とする動作を私に与える。

<span class="example-inline" uib-dropdown> 
    <button type="button" class="btn btn-primary" uib-dropdown-toggle> 
    D. Nowrap Table in Dropdown 
    </button> 
    <ul class="dropdown-menu" uib-dropdown-menu> 
     <table style="white-space: nowrap;" class="dropdown-table"> 
     <tr ng-repeat="item in ctrl.items"> 
      <td style="width:90%"> 
      {{item.label}} 
      </td> 
      <td style="width:10%"> 
      {{item.hotkey}} 
      </td> 
     </tr> 
     </table> 
    </ul> 
    </span> 

クリーナーソリューションはありますか？私はいくつかのCSS調整をして1.Aのようなものを好むだろう。私は必要に応じて大きなリファクタを避けたいと思います。ありがとう！

Answer 1

一つのきれいな解決策は、CSS3の幅MAX-コンテンツ値に

.width-max-content { 
    width: max-content; 
    width: -moz-max-content; 
    width: -webkit-max-content; 
} 

を使用しているのul要素にこのクラスを持っている：

<span class="example-inline" uib-dropdown> 
    <button type="button" class="btn btn-primary" uib-dropdown-toggle> 
    A. Autowidth Dropdown 
    </button> 
    <ul class="dropdown-menu width-max-content" uib-dropdown-menu> 
     <li ng-repeat="item in ctrl.items"> 
     <a> 
      <span style="float:left">{{item.label}}</span> 
      <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span> 
     </a> 
     </li> 
    </ul> 
</span> 

Plunker

さて、これは、クロム、Firefoxで素晴らしい作品サファリではありませんが、IEではサポートされていないmax-content（IEの-ms-max-contentバージョンはありません）とは異なります。

IEの場合、アンカータグのホットキーストリングの最大幅に余裕があります。テンプレートで

.hotkey-margin { 
    margin-right: 6em; 
} 

：ドロップダウンがインライン要素上にあるときにのみ

<a class="hotkey-margin"> 
     <span style="float:left">{{item.label}}</span> 
     <span style="float:right; padding-left: 15px;">{{item.hotkey}}</span> 
</a> 

はそれを持っています。 また、max-content & margin rightの両方を使用すると、chrome/moz/safariで問題が発生します。このクラスのような条件を追加すると、IEの場合のみ追加されます。 （またはすべてのブラウザでこの方法を使用することはできません&最大コンテンツ幅を使用しないでください）。

Plunker

P.S.私はExample 1.Aのみを検討しています。その他1。D 'DropdownのテーブルをNowrap'とすれば完璧ですね。