Я хочу изменить положение раскрывающегося меню ngbootstrap в приложении Angular, но я не могу этого сделать.
Я хочу переопределить встроенные изменения стиля следующего кода
<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>
Но я не могу этого сделать. Как мне это сделать?
Во-первых, вы не можете перезаписать встроенный стиль элемента HTML из файла CSS. Если вы хотите сделать это, вам нужно добавить! Важно в файле CSS. Взгляните на приведенный ниже код:
.my-drop-down .dropdown-menu.show {
top: 40px !important;
left: -50px !important;
}
Во-вторых, если вы хотите перезаписать стили внешних источников (например, bootstrap, материальный дизайн), вам нужно написать свои стили в глобальном файле CSS или изменить инкапсуляцию компонентов в NONE. Пример ниже:
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
Добавьте собственный CSS-класс в раскрывающийся список, если вы хотите перезаписать CSS для определенных мест. Я добавил класс div -down-down для 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>