web-dev-qa-db-ja.com

ng-bootstrap-先行入力ドロップダウン幅

Ng-bootstrap Typeaheadコンポーネントを使い始めましたが、かなり満足しています。

私が達成したいことの1つは、ドロップダウンアイテムの幅を入力フィールドと同じにすることですが、デフォルトの動作では、テキストの長さに応じて幅が適用されます。基本的なCSSである必要があります...

Plunkerで基本的な 例 を作成しました。

お気づきのとおり、適用されたスタイルは無視されます。

.dropdown-menu { width: 100%;}

一方、ブラウザ開発ツールを使用し、同じものを適用すると、それが適用されます。

CSSを使用して結果を達成する方法について何かアイデアはありますか？

cssangularbootstrap-4ng-bootstrap
5
Momo

追加 encapsulation: ViewEncapsulation.Noneコンポーネントに

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'ngbd-typeahead-template',
  templateUrl: 'src/typeahead-template.html',
  styleUrls: ['src/typeahead-template.css'],
  encapsulation: ViewEncapsulation.None
})

更新された プランカー を参照してください

ViewEncapsulation.Noneがない場合、このコンポーネントに適用されるスタイルは、このコンポーネントにのみ影響し、このページの他のコンポーネントには影響しません。

詳細については this をお読みください

4
Nandita Sharma

私にとってはng-deepで動作します。より安全でスコープが広いように見えます：

::ng-deep .dropdown-menu { width: 100%; }
4
Alexey Volynshchikov

@Nanditaの答えは正しいです。ドロップダウンメニューに直接幅を適用しても影響はありません。

また、ドロップダウンメニューの幅を入力と同じにする必要があるため、CSSの下に彼女の回答を追加する必要があります。

.dropdown-menu { width: 300px;}

チェック結果： https://next.plnkr.co/edit/YvOymCLAwYgU3VmJ

1
huan feng

このコードは100％機能しますが、クラス.dropdown-menuを使用すると他のドロップダウンが変更されます

::ng-deep .dropdown-menu { width: 100%; }

したがって、IDとしてngb-typeahead-を指定してこのコードを使用しました。

::ng-deep [id^="ngb-typeahead-"]{ 
width: 100%!important; 
white-space: nowrap!important;
overflow: hidden!important;
text-overflow: Ellipsis!important;}
0
itzmevant

Scssを使用するとうまくいくはずです。あなたのdomで親divを見つけて、クラス 'dropdown-wrapper'を与えます。

.dropdown-wrapper {
  .dropdown-menu {
    width: 90%;
  }
}

これをグローバルSCSに追加します。乾杯！

0
Anmol Arora