1

angular material CDK オーバーレイを使用して、複数選択ドロップダウン コンポーネントを作成しようとしています。以下のコードのように (Angular Material Select コンポーネントから取得)

<div class="multi-select-dd">
    <label class="multi-select-dd-text">{{ label }}</label>
    <div class="multi-select-dd-text-container">
        <ul class="taggle_list"
            cdk-overlay-origin
            (click)="toggle()"
            #origin="cdkOverlayOrigin"
            #trigger>
            <li>
                <input type="text"
                       class="taggle_input"
                       tabindex="1"
                       style="padding-left: 0px; padding-right: 0px;"
                       autocomplete="off">
            </li>
        </ul>
    </div>
</div>


<ng-template cdk-connected-overlay
             cdkConnectedOverlayHasBackdrop
             cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
             [cdkConnectedOverlayOrigin]="origin"
             [cdkConnectedOverlayOpen]="panelOpen"
             [cdkConnectedOverlayPositions]="_positions"
             [cdkConnectedOverlayMinWidth]="_triggerRect?.width"
             [cdkConnectedOverlayOffsetY]="_offsetY"
             (backdropClick)="close()"
             (attach)="_onAttached()"
             (detach)="close()">
    <div style="background-color: lightgreen;">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
            <li>Four</li>
            <li>Five</li>
        </ul>
    </div>
</ng-template>

そのため、ドロップダウンからアイテムが選択されるたびに、接続された位置であるボックスにチップとして表示されます。元の要素の高さを変更します。

質問:オーバーレイの原点の高さの変更時にオーバーレイを startY 位置に再配置する標準的な方法はありますか?

4

2 に答える 2