Невозможно разместить раскрывающееся меню ngbootstrap
Я хочу изменить положение раскрывающегося меню 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>
Но я не могу этого сделать. Как мне это сделать?
У него разные встроенные стили для одного и того же x-Placement = "bottom-left". Дай мне попробовать.
Из-за разницы в версии ng-bootstrap?
И как мне это решить.
Я не могу этого сделать. Должен ли я отредактировать свой ответ и также разместить HTML.
Обновите сообщение более релевантным HTML или создайте вилку staclblitz выше и добавьте его, сохраните и поделитесь новым URL-адресом, пожалуйста
Отредактировал HTML. Пожалуйста, проверьте сейчас.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Во-первых, вы не можете перезаписать встроенный стиль в элементе HTML из файла CSS. Если вы хотите это сделать, вам нужно добавить! Important в файл CSS. Взгляните на код ниже:
.my-drop-down .dropdown-menu.show {
top: 40px !important;
left: -50px !important;
}
Во-вторых, если вы хотите перезаписать стили внешних источников (например, bootstrap, material design), вам необходимо записать свои стили в глобальный файл CSS или изменить инкапсуляцию вашего компонента на NONE. См. Пример ниже:
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
Добавьте собственный класс CSS в раскрывающийся список, если вы хотите перезаписать CSS для определенных мест. Я добавил в 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>
напишите встроенный CSS для раскрывающегося меню.
style = "поле слева: -50 пикселей; верхнее поле: 40 пикселей";
<div _ngcontent-c13 = "" aria-labelledby = "columnToggle" ngbdropdownmenu = "" class = "dropdown-menu show" x-placement = "bottom-left" style = "margin-top: 40px; margin-left: -50px;">
Это переопределит положение раскрывающегося списка.
Не могли бы вы сделать демо? Вы можете использовать это: stackblitz.com/edit/angular-hwsakf