0

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

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

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

私は何が欠けていますか？

4

1 に答える 1

1

問題は、項目を選択すると、選択入力の上部にあるプレースホルダーの幅が JavaScript によって増加することです。にあるposition: relativeため、DOM 内の場所は変わらないため、選択フィールド内にあるように変わりませんが、幅が広くなり、矢印が右に押し出されます。

この問題を解決するには、追加できます

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

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

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

于 2017-07-18T15:06:21.663 に答える