0

[clrPosition]=bottom-right使用がスタイルにつながった場合のアイデア

left: 0px; 
right: auto;

対応するClarity-AngularコードのHTMLで以下に示すように?

明瞭度-角度

<clr-dropdown-menu [clrPosition]="'bottom-right'">
.
.
.
</clr-dropdown-menu>

HTML:

<clr-dropdown-menu _ngcontent-c1="" 
      ng-reflect-position="bottom-right" 
      class="dropdown-menu" 
      style="position: absolute; top: 0px; bottom: auto; left: 0px; right: auto; 
      visibility: hidden;>
    .
    .
    .
</clr-dropdown-menu>

私は次のスタイルを期待していました:

left: auto; 
right: 0px; 

これは、ドロップダウンを左側 (自動) で有機的に成長させ、ブロックを含む右側 (0px) に向かって固定するためです。(ところで、試してみ[clrPosition]=bottom-leftましたが、とに変化はleftありませんでしたright。)

実際、よく見ると、一部の Clarity CSS は実際にはclr-dropdown-menu手動で設定left=autoして同じことを実行しようとしていright=0ますが、下の図に示すようにオーバーライドされているため、最終的にこの問題のために水平スクロール バーが表示されます。アプリ全体。それが私がここで修正している主な問題です。

ここに画像の説明を入力

これがバグなのか、予想される動作なのかを確認できますか? 左と右を期待値に設定するより良い方法はありますか?

スタイルを設定するために 'style' 属性を使用していたため、Clarity CSS によって取得されたより高い特異性のため、左右をオーバーライドして値を修正することさえできません。Clarity の CSS コードを変更する必要がない他のクリーンな方法はありますか?

4

1 に答える 1