Не удалось разместить выпадающее меню ngbootstrap

1

Я хочу изменить положение раскрывающегося меню 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>

Но я не могу этого сделать. Как мне это сделать?

  • 0
    Не могли бы вы сделать демо? Вы можете использовать это: stackblitz.com/edit/angular-hwsakf
  • 0
    У него разные встроенные стили для одного и того же x-location = "bottom-left". Дай мне попробовать.
Показать ещё 5 комментариев
Теги:
angular
angular6
ng-bootstrap

1 ответ

0

Во-первых, вы не можете перезаписать встроенный стиль элемента 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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню