如何使角材料组件出现在导航栏顶部? [英] how to make angular material component appear on top the navbar?

问题描述

如上图所示，我的搜索组件(来自 material.angular.io 的自动填充组件)在导航栏(绿色)结束后显示其选项，我希望我的选项显示在搜索框下方，在绿色导航栏顶部.

这是我的引导导航栏

<a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link nav-link-r" href="#">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link nav-link-r" href="#">Link</a><li class="nav-item dropdown"><a class="nav-link dropdown-toggle nav-link-r" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="假">落下</a><div class="下拉菜单" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">另一个动作</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">这里还有别的东西</a>

<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a><app-search-bar></app-search-bar>

</nav>

这是我的搜索栏组件，

<输入类型="文本"占位符=选择一个"咏叹调标签=数字"垫输入[formControl]="myControl"[matAutocomplete]="自动"style="border-style: none; height:100%; width:100%;"><mat-autocomplete #auto="matAutocomplete"><mat-option *ngFor="let option of filteredOptions | async" [value]="option">{{选项}}</mat-option></mat-autocomplete></表单>

是什么导致选项出现在导航栏之后?我该如何纠正?

更新*我删除了导航栏并将表单放在一个带有样式背景的 div 中:绿松石，z-index:0 并给表单一个 z-index:1，它仍然在 div 下弹出

解决方案

使用example-form类的z-index属性高于navbar

As you can see in the picture above my search component(which is an autofill component from material.angular.io) displays its options after the navbar(green) ends, I want my options to display right under the search box, on top the green navbar.

this is my bootstrap navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light mynavbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link nav-link-r" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link nav-link-r" href="#">Link</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle nav-link-r" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
  <app-search-bar></app-search-bar>
  </div>
  </nav>

and this is my searchbar component,

<form class="example-form">
      <input type="text"
             placeholder="Pick one"
             aria-label="Number"
             matInput
             [formControl]="myControl"
             [matAutocomplete]="auto"
             style="border-style: none; height:100%; width:100%;"
            >
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          {{option}}
        </mat-option>
      </mat-autocomplete>
  </form>

what's causing the options to appear after the navbar? how do I correct it?

UPDATE* I removed the navbar and put the form inside a div with styles background:turquoise , z-index:0 and gave the form an z-index:1, still it pops up under the div

解决方案

Use z-index property of example-form class higher than that of navbar

这篇关于如何使角材料组件出现在导航栏顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！