4

私はmd-autocompleteAngular Materialから使用しています：こちら

ドロップダウンの幅は入力フィールドの幅と一致しているようです。アイテムのテキストが長すぎる場合は、ellipsis.

ただし、入力フィールドの幅を比較的短く保ちながら、アイテムの全文を表示したいと考えています。つまり、ドロップダウンの幅はそのコンテンツに合わせて拡張する必要があります。

の要素のスタイルを調べてみましmd-autocompleteたが、うまくいくスタイルが見つかりませんでした。何か案が？

編集：

私が最終的に持っていたスタイルは次のとおりです。

.md-autocomplete-suggestions-container{
    overflow-y:scroll
}

.md-autocomplete-suggestions-container .md-virtual-repeat-scroller{
    position:static
}

.md-autocomplete-suggestions-container .md-virtual-repeat-sizer{
    height:0 !important
}

.md-autocomplete-suggestions-container .md-virtual-repeat-offsetter{
    position:static
}

ただし、もう 1 つ問題があります。はoverflow-y:scroll、必要がない場合でも常に垂直スクロール バーを表示します。に変更するとoverflow-y:auto、存在する場合の垂直スクロール バーが作成されますellipsis。これを解決するにはどうすればよいですか？

4

4 に答える 4

8

パネルの幅がフィールドと同じ幅しかないため、オートコンプリート値が切り取られるという問題にまだ直面している人にとって、良いニュースは、修正されたことです。

Angular Material Release 6.4.0 (2018-07-16) では、次の機能が導入されました。

  • autocomplete : パネルの幅の値を auto にできるようにしました ( #11879 ) ( 8a5713e )

そのため、プロパティ panelWidth に値 auto を追加するだけで、パネルが値に合わせて拡大されます。

<mat-autocomplete panelWidth="auto">
      <mat-option value="myValue">Now an option with a long label will still be readable<option>
</mat-autocomplete>
于 2018-07-18T06:49:13.590 に答える
3

md-autocompletecssでターゲットにできるように、要素にクラスを設定する必要があります。この例を参照してください

  <md-autocomplete class="autocompletable"  
              md-min-length="0" 
              ... 
              placeholder="US State?" 
              md-menu-class="autocompletable-contents">
              <md-item-template>
                 <table>
                    <tr>
                        <td><span md-highlight-text="ctrl.searchText" 
                            md-highlight-flags="^i">{{item.ok}}</span>
                        </td><td>Foo</td>
                    </tr>
                 </table>
              </md-item-template>
              <md-not-found>
                 No states matching "{{ctrl.searchText}}" were found.
                 <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
              </md-not-found>
           </md-autocomplete>

そして、CSSでこれを行う必要があります

  md-autocomplete.autocompletable{ width: 200px; }
  .autocompletable-contents{ }

編集: 材料1.0.9でテスト済み

于 2016-07-19T10:49:13.327 に答える
3

css を使用してスタイルを設定できますmd-virtual-repeat-container。

ただし、それはサイトにある可能性のある のすべてのインスタンスmd-virtual-repeat-container(つまりmd-autocompleteとmd-virtual-repeat) のスタイルを設定します。

残念ながら、現時点では、個々の md-autocomplete ドロップダウンを調整するオプションはありません。この問題を解決するために、チケットとプル リクエストを作成しました。これが Angular Material の将来のリリースの 1 つに含まれることに指が交差しました。

頑張ってください！

于 2016-06-02T06:19:33.850 に答える