CSSフレックスボックスでAngularのmaterial2ドロップダウンを使用するにはどうすればよいですか?

1 2 3

Angularのflex-layoutライブラリを使用していますが、幅が50%の2列の行を作成すると問題が発生します。ドロップダウンの1つを使用すると、もう1つの列が少し縮小します。Chromeの要素を調べたところ、問題の原因となる明らかなものは何も見つかりませんでした。

Select #1ドロップダウンからオプションを選択すると、問題を再現できます

http://plnkr.co/edit/aL1qrrP3sX2XZQcfaglQ?p=preview

何が足りないのですか?

リチャードカセッタ

問題は、アイテムを選択すると、選択した入力の一番上にあるプレースホルダーの幅がJavaScriptによって増加することです。の場合と同様position: relativeに、DOM内の位置は変更されないため、選択フィールドの場合と同じですが、幅が広くなり、矢印が右に押し出されます。

この問題を修正するには、次を追加します

.mat-select-arrow {
  position: absolute;
  right: 0;
}

したがって、矢印は絶対位置にあり、プレースホルダーによって押されることはありません。

プレースホルダーの幅が変更されているのは不思議です...

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

タブ内にドロップダウンリストを作成するにはどうすればよいですか?Material2を使用したAngular5

分類Dev

wgetを使用してドロップボックスフォルダをダウンロードするにはどうすればよいですか?

分類Dev

ドロップダウンボックスの下のSelect2で選択したタグを表示するにはどうすればよいですか?

分類Dev

ポップアップウィンドウ内でダイアログボックスを使用するにはどうすればよいですか?

分類Dev

Angular Material 7のドラッグアンドドロップにプレースホルダーを使用するにはどうすればよいですか?

分類Dev

jQueryを使用して複数のドロップダウンボックスから合計を取得するにはどうすればよいですか?

分類Dev

jQueryを使用して複数のドロップダウンボックスから合計を取得するにはどうすればよいですか?

分類Dev

ドロップダウンボックスをcssクラスで動作させるにはどうすればよいですか?

分類Dev

Angularのドロップダウンボックスリストを使用してフォームを送信するためのユニットテストケースを作成するにはどうすればよいですか?

分類Dev

ドロップダウンボックスのすべてのオプションをクリアするにはどうすればよいですか?

分類Dev

実行時にコンボボックスのドロップダウンスタイルを変更するにはどうすればよいですか?

分類Dev

選択ドロップダウンを複数のチェックボックスに変換するにはどうすればよいですか?

分類Dev

選択したチェックボックスの値を選択ドロップダウンに表示するにはどうすればよいですか?

分類Dev

角度の選択ドロップダウンボックスにデフォルト値を与えるにはどうすればよいですか?

分類Dev

JSPでテキストボックスのドロップダウンリストを回避するにはどうすればよいですか?

分類Dev

ドロップダウン(Angular 4+)のクラスライブラリボタンを上書きするにはどうすればよいですか?

分類Dev

Vue.js:[選択]ドロップダウンボックスでオプションの属性を取得するにはどうすればよいですか?

分類Dev

ドロップダウン ボックスを使用してスタイルシートを変更するにはどうすればよいですか?

分類Dev

コンボボックスのドロップダウンとして画像を追加するにはどうすればよいですか?

分類Dev

6つのKendoUIドロップダウンリストボックスのデータを更新するにはどうすればよいですか?

分類Dev

ドロップボックス経由でダウンロード済みのドロップボックスからファイルにアクセスするにはどうすればよいですか?

分類Dev

GridView :: widget、Yii2の検索ボックスでフィルタリングを使用して単純なドロップダウンリストを使用するにはどうすればよいですか?

分類Dev

ドロップダウンリストを含むHTMLダイアログボックスを作成するにはどうすればよいですか?

分類Dev

Angular Material2でプライマリパレットのフォントの色を変更するにはどうすればよいですか?

分類Dev

ボックス:特定のフォルダにファイルをダウンロードするにはどうすればよいですか?

分類Dev

(JSFiddleの変更)前のドロップダウンボックスで選択したものに応じて、ドロップダウンボックスのみを表示するにはどうすればよいですか?

分類Dev

マテリアライズドロップダウンを選択ボックスの下に表示するにはどうすればよいですか?

分類Dev

Nautilusの「場所」の下にドロップボックスフォルダオプションを追加するにはどうすればよいですか?

分類Dev

(CSSフレックスボックスを使用して)このレイアウトを取得するにはどうすればよいですか?

Related 関連記事

  1. 1

    タブ内にドロップダウンリストを作成するにはどうすればよいですか?Material2を使用したAngular5

  2. 2

    wgetを使用してドロップボックスフォルダをダウンロードするにはどうすればよいですか?

  3. 3

    ドロップダウンボックスの下のSelect2で選択したタグを表示するにはどうすればよいですか?

  4. 4

    ポップアップウィンドウ内でダイアログボックスを使用するにはどうすればよいですか?

  5. 5

    Angular Material 7のドラッグアンドドロップにプレースホルダーを使用するにはどうすればよいですか?

  6. 6

    jQueryを使用して複数のドロップダウンボックスから合計を取得するにはどうすればよいですか?

  7. 7

    jQueryを使用して複数のドロップダウンボックスから合計を取得するにはどうすればよいですか?

  8. 8

    ドロップダウンボックスをcssクラスで動作させるにはどうすればよいですか?

  9. 9

    Angularのドロップダウンボックスリストを使用してフォームを送信するためのユニットテストケースを作成するにはどうすればよいですか?

  10. 10

    ドロップダウンボックスのすべてのオプションをクリアするにはどうすればよいですか?

  11. 11

    実行時にコンボボックスのドロップダウンスタイルを変更するにはどうすればよいですか?

  12. 12

    選択ドロップダウンを複数のチェックボックスに変換するにはどうすればよいですか?

  13. 13

    選択したチェックボックスの値を選択ドロップダウンに表示するにはどうすればよいですか?

  14. 14

    角度の選択ドロップダウンボックスにデフォルト値を与えるにはどうすればよいですか?

  15. 15

    JSPでテキストボックスのドロップダウンリストを回避するにはどうすればよいですか?

  16. 16

    ドロップダウン(Angular 4+)のクラスライブラリボタンを上書きするにはどうすればよいですか?

  17. 17

    Vue.js:[選択]ドロップダウンボックスでオプションの属性を取得するにはどうすればよいですか?

  18. 18

    ドロップダウン ボックスを使用してスタイルシートを変更するにはどうすればよいですか?

  19. 19

    コンボボックスのドロップダウンとして画像を追加するにはどうすればよいですか?

  20. 20

    6つのKendoUIドロップダウンリストボックスのデータを更新するにはどうすればよいですか?

  21. 21

    ドロップボックス経由でダウンロード済みのドロップボックスからファイルにアクセスするにはどうすればよいですか?

  22. 22

    GridView :: widget、Yii2の検索ボックスでフィルタリングを使用して単純なドロップダウンリストを使用するにはどうすればよいですか?

  23. 23

    ドロップダウンリストを含むHTMLダイアログボックスを作成するにはどうすればよいですか?

  24. 24

    Angular Material2でプライマリパレットのフォントの色を変更するにはどうすればよいですか?

  25. 25

    ボックス:特定のフォルダにファイルをダウンロードするにはどうすればよいですか?

  26. 26

    (JSFiddleの変更)前のドロップダウンボックスで選択したものに応じて、ドロップダウンボックスのみを表示するにはどうすればよいですか?

  27. 27

    マテリアライズドロップダウンを選択ボックスの下に表示するにはどうすればよいですか?

  28. 28

    Nautilusの「場所」の下にドロップボックスフォルダオプションを追加するにはどうすればよいですか?

  29. 29

    (CSSフレックスボックスを使用して)このレイアウトを取得するにはどうすればよいですか?

ホットタグ

アーカイブ