Question

我想更改Angular应用程序中ngbootstrap下拉菜单的位置，但无法执行此操作。

我想覆盖以下代码的内联样式更改

<div _ngcontent-c13="" aria-labelledby="columnToggle" ngbdropdownmenu="" class="dropdown-menu show" x-placement="bottom-left" style="top: 40px; left: 0px;">

我尝试在组件CSS中使用它

ngb-dropdown-menu /deep/ .dropdown-menu.show{
  top: 40px;
  left: -50px;
}

这是相同的HTML

 <div ngbDropdown class="d-inline-block">
      <button class="btn btn-custom" id="columnToggle" ngbDropdownToggle ngbTooltip="Filter by Column Headers">
        <fa-icon [icon]="faColumns" title="Select to Show/Hide Columns"></fa-icon>
      </button>
      <div ngbDropdownMenu aria-labelledby="columnToggle">
        <button class="dropdown-item" *ngFor="let column of columnList">
          <label>
            <input type="checkbox" [checked]="column.selected" (change)="changeSelectedColumns.emit(column)" [disabled]="column.disabled"
            /> {{column.header}}
          </label>
        </button>
      </div>
    </div>

但是我无法做到这一点。我该怎么办？

Answer 1

第一件事是您不能覆盖CSS文件中HTML元素上的内联样式。如果要这样做，则需要在CSS文件中添加！important。看看下面的代码：

.my-drop-down .dropdown-menu.show {
    top: 40px !important;
    left: -50px !important;
}

第二，如果要覆盖外部源样式（如引导程序，材料设计），则需要在全局CSS文件中编写样式或将组件的封装更改为NONE。参见以下示例：

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

如果要覆盖特定位置的CSS，请在下拉菜单中添加自定义CSS类。我已将 my-drop 类添加到div中。参见下面的代码：

<div ngbDropdown class="d-inline-block my-drop-down">
    <button class="btn btn-custom" id="columnToggle" ngbDropdownToggle ngbTooltip="Filter by Column Headers">
        <fa-icon [icon]="faColumns" title="Select to Show/Hide Columns"></fa-icon>
    </button>
    <div ngbDropdownMenu aria-labelledby="columnToggle">
        <button class="dropdown-item" *ngFor="let column of columnList">
            <label>
                <input type="checkbox" [checked]="column.selected" (change)="changeSelectedColumns.emit(column)" [disabled]="column.disabled"
                /> {{column.header}}
            </label>
        </button>
    </div>
</div>

Answer 2

为下拉菜单编写内联CSS。

style =“ margin-left：-50px; margin-top：40px”;

<div _ngcontent-c13="" aria-labelledby="columnToggle" ngbdropdownmenu="" class="dropdown-menu show" x-placement="bottom-left" style="margin-top: 40px; margin-left: -50px;">

它将覆盖下拉菜单的位置。

无法放置ngbootstrap下拉菜单

2 个答案: