Ng bootstrap 下拉菜单不在前面

Posted 2023-03-05

【中文标题】Ng bootstrap 下拉菜单不在前面

【英文标题】：Ng bootstrap dropdown not in front

【发布时间】：2018-08-20 15:41:17

【问题描述】：

我在 Angular 5 项目中使用 Ng-bootstrap。我正在尝试在我的导航标题中创建一个下拉列表，并且我已经设法使它工作，但是它在我容器中的东西的背景中 - 我当然希望它在前面。

这就是现在的样子：

我还没有设法让 ng-bootstrap 在 Plunker 中工作，所以我将在这里分享相关代码。 这是我的 header.component.html 文件：

<div class="my-header">
<header class="navbar navbar-light navbar-expand-lg">

<a class="navbar-brand" [routerLink]="['/']">HELLO</a>

<button aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" type="button" (click)="toggleCollapse()">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="navbar-collapse collapse show" [@collapse]="collapse" id="navbarContent">

  <ul class="navbar-nav ml-auto">

    <li class="nav-item">
      <a class="nav-link" [routerLink]="['/main/memberships']">Memberships</a>
    </li>

    <div ngbDropdown placement="bottom-right" class="d-inline-block">
      <li class="nav-item nav-link dropdown my-header-but" id="DropdownBasic1" ngbDropdownToggle>Profile</li>
      <div ngbDropdownMenu class="my-dropdown" aria-labelledby="DropdownBasic1">
        <li class="nav-item">
          <a class="dropdown-item" [routerLink]="['/main/profile']">Your profile</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" [routerLink]="['/main/profile']">Paid subscriptions</a>
        </li>
        <li class="nav-item">
          <a class="dropdown-item" [routerLink]="['/main/profile']">Payment history</a>
        </li>
        <button class="dropdown-item" (click)="logOut()">Log out</button>
      </div>
    </div>

  </ul>
</div>

这是我的 app.component.html：

<app-header></app-header>
<router-outlet></router-outlet>

阻塞中的组件通常看起来像 random.component.html：

 <div class="container">
   <div class="row">
     <div class="col">
       All kinds of content
     </div>
   </div>
 </div>

这是我的自定义 scss：

.my-header 
  padding-left: 0;
  padding-right: 0;
  background-color: $secondary-bg;
  border-bottom-width: 1px;
  border-color: $accent-color;
  box-shadow: 0 12px 5px -10px $black;


.my-header-but 
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;


.my-dropdown 
  top: 100%;
  background-color: $gray-900;
  box-shadow: 12px 0 15px -7px $black, -12px 0 15px -7px $black, 0 12px 
  15px -7px $black;
  overflow: visible !important;

下拉列表中的计算样式如下:

下拉列表前面的元素的样式很简单：

 box-sizing: border-box;
 display: block;

我尝试调整不同元素的 z-index，但没有任何运气。我可以在浏览器中看到样式更改确实应用于元素。 那么，您将如何继续尝试将其放在前面呢？ 请让我知道您需要有关其他任何信息的更多信息。

更新：

我发现使用“col”类帮助更改 z-index 并将底层 div 放在下拉列表下方。我当然想把标题和下拉菜单放在所有东西的前面——而不是把所有东西放在后面。但这似乎与我的标题结构有关。

更新 2：

将 z-index: 1010 添加到：

<div class="navbar-collapse collapse show" [@collapse]="collapse" 
id="navbarContent">

修复它。我不知道为什么它已经不是 z-index 了，以为 bootstrap 会解决这个问题。但我暂时不会深入研究。

谢谢大家的回答。

【问题讨论】：

我知道您说过您已经厌倦了使用 z-index，但您是否尝试过将配置文件选项上方的框设为负 z-index

实际上没试过！但是现在这样做了，不幸的是并没有太大的不同。

添加您的 css 属性后，请确保在您的浏览器开发人员视图中，您的 css 属性实际上正在被应用并且您的缓存已被清除，因为有时您的浏览器可以保留旧缓存，您可以通过单击来执行此操作并按住 Ctrl - F5（在 Windows 上）

你试过：:host z-index: 1000000; 在标题组件CSS吗？

我已经尝试添加它，但我似乎不会计算。我到底需要在哪里添加它？我不太清楚 ':host' 标签的含义。

【参考方案1】：

我迟到了，但遇到了同样的问题。

我通过在下拉列表周围放置相对和绝对容器并在下拉列表中应用 z-index 来解决它：

<div class="outer">
    <ul class="nav">
        <li class="nav-item" ngbDropdown>
            <a class="nav-link" id="tselect" role="button" aria-haspopup="true" ngbDropdownToggle>
                user.company
            </a>
            <div class="dropdown-menu dropdown-menu-right" ngbDropdownMenu aria-labelledby="tselect">
                <button ngbDropdownItem>... text ...</button>
            </div>
        </li>
    </ul>
</div>

和组件 SCSS：

.outer 
    position: relative;
    ul.nav 
        position: absolute;
        z-index: 1010;
    

在我的情况下，我无法在 .navbar-collapse 上使用 z-index，因为当下拉内容变大时，它的宽度被修改了。

【参考方案2】：

首先，您应该获得下拉菜单。我会假设它是

<div ngbDropdownMenu class="my-dropdown" aria-labelledby="DropdownBasic1">

因为它有一个指令属性并且你试图设置它的样式。

在此元素上，您必须检查其position 是否为除static 或initial 之外的所有内容。

检查完后，您可以修改此元素的 z-index

.my-dropdown  z-index: 9999 !important; 

但是你需要看到的是你的组件是否被封装。您可以在装饰@Component 中看到它。如果你没有看到ViewEncapsulation.none，那么你的组件被封装了。

这意味着它将为您的组件标签添加自定义属性，因此会删除您尝试应用的一些样式（我还没有弄清楚哪些样式）。

在这种情况下，您需要将您的类放入您的根样式中，通常为style.css（或scss 或更少）。

之后，它应该像魅力一样工作！

【讨论】：

位置是绝对的。我试图添加 z-index: 9999 !important; 到下拉类，我可以在检查中看到它获取了属性。但是它仍然落后于 body 中的元素。

@Lars 你看我的回答了吗？我花了大约 15 分钟把它写下来给你...

我做到了。并感谢您的回答！但我不认为这是不幸的。我只有一个 scss 文件，我的所有组件都从中获取样式，所以我认为封装不是问题。

那么也许你应该从那个开始......你能检查你的元素并给我们他的计算风格吗？您能否也给出它上面的组件的计算样式并隐藏它？

我现在已将其添加到屏幕截图中。谢谢。