[英]ngx-Bootstrap 4 dropdown and navbar not working with Angular 7
[英]ngx-bootstrap dropdown alignment not working when setting dynamic class
我对 ngx-bootstrap(使用 bootstrap 4.1)下拉组件有一个奇怪的问题。
我将下拉菜单设置为通过变量向右对齐,但是,当我这样做时,下拉菜单仅在第二次单击时对齐。
这是一个复制问题的示例代码:
<div class="btn-group" dropdown placement="bottom right">
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
This dropdown's menu is right-aligned <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" [ngClass]="{'dropdown-menu-right': true}" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
注意:我动态设置属性的 [ngClass] 是导致问题的原因,如果我将它静态地放在类定义中,它工作正常。
这是一个复制的示例 Plunker: https ://plnkr.co/edit/5OrrQx0uefrWxWBliJDL?p = preview
如果您查看调试器中生成的 html,您将看到ul
包含您的dropdown-menu-right
类和一些内联样式,它们覆盖了定位(第一次打开它时)。 这些内联样式可能是由库添加的。
<ul class="dropdown-menu show dropdown-menu-right"
role="menu" ng-reflect-klass="dropdown-menu"
ng-reflect-ng-class="[object Object]"
style="left: 0px; right: auto; top: 100%; transform: translateY(0px);">
也许您应该与库维护者一起将问题提交给 github。 作为一种解决方法,您可以尝试将此 css 添加到您的全局 CSS 文件中
.dropdown-menu-right {
right: 0 !important;
left: auto !important;
}
这与默认为该类定义的样式相同,只是有一个important
规则
你的plunker编辑(在index.html中使用样式)
试试这个用单引号包裹整个表达式'
[ngClass]="'{dropdown-menu-right: true}'"
而不是这个[ngClass]="{'dropdown-menu-right': true}"
是的,我认为这是某种 ngx-bootstrap 生命周期错误。
对我来说修复它的是以下丑陋的“模板魔术”( popupLeft
是我的布尔值,它决定是否应该添加dropdown-menu-right
):
<ng-template *ngIf="popupLeft" dropdownMenu>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<ng-container *ngTemplateOutlet="dropdownMenuContents"></ng-container>
</ul>
</ng-template>
<ng-template *ngIf="!popupLeft" dropdownMenu>
<ul class="dropdown-menu" role="menu">
<ng-container *ngTemplateOutlet="dropdownMenuContents"></ng-container>
</ul>
</ng-template>
<ng-template #dropdownMenuContents>
<li class="dropdown-item">
<!-- ... -->
</li>
</ng-template>
要使placement="bottom right"
起作用,您还应该添加container="body"
这应该有效:
<div class="btn-group" dropdown container="body" placement="bottom right">
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
This dropdown's menu is right-aligned <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" [ngClass]="{'dropdown-menu-right': true}" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.