angular ng-bootstrap下拉z-index和overflow

时间:2018-02-09 18:06:45

标签: css angular twitter-bootstrap sass ng-bootstrap

我正在开发一个带有列的电路板。列的内部项需要引导下拉列表。我遇到的问题是下拉容器导致溢出。我需要能够在列容器上方对其进行z索引,以便它不会溢出。我在github repo中看到有一个问题可以打开并附加到身体特征,就像它们与弹出框和工具提示一样,但它似乎没有得到解决。有人可以提出解决方案吗?

模板:

1
列的

scss / css:

<div class="board-container">
    <div class="board-column" *ngFor="let column of columns">
        <div class="board-heading">
            {{ column.name }}
            <span class="count">{{ column.items.length }}</span>
        </div>
        <div id="{{ column.id }}"
            class="board-body h-100"
            (onDrop)="onItemDrop($event)"
            droppable>
            <div class="card bg-light-blue mb-2"
                *ngFor="let item of column.items"
                [dragEnabled]="true"
                [dragData]="item"
                draggable>
                <div class="card-body">
                    <div class="card-title mb-0">
                        <h6>
                            <span class="text-primary">{{ item.contactName }}</span><br>
                            <span class="text-secondary">{{ item.mediaOutletName }}</span>
                        </h6>
                        <div ngbDropdown>
                            <button
                                class="btn btn-transparent"
                                id="columnSelect"
                                ngbDropdownToggle>
                            </button>
                            <div ngbDropdownMenu aria-labelledby="columnSelect">
                                <button class="dropdown-item">Action - 1</button>
                                <button class="dropdown-item">Action - 2</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-text text-dark">
                        Sent: {{ item.updatedDate | date }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

问题的屏幕截图

enter image description here

0 个答案:

没有答案