Не удается правильно отобразить результаты автозаполнения. угловатый - PullRequest
Новая
       27

Не удается правильно отобразить результаты автозаполнения. угловатый

0 голосов
/ 01 мая 2019

Итак, я создаю панель поиска для автоматически полученных результатов с помощью Spotify API, я получаю результаты, но они отображаются неправильно.Я бы хотел, чтобы они были друг над другом.Вот что происходит.

https://imgur.com/lqBgBah

Это шаблон компонента 

<div class='container header'>

    <div id="navigation-bar">
      <nav class="navbar">

        <ul class="menu-ul">
          <li class="menu-li"><i class="fas fa-sliders-h"></i></li>
          <li class="menu-li"><a routerLink="/home">Home</a></li>
          <li class="menu-li"><a routerLink="/about">About</a></li>
          <li class="menu-li"><a href=#>Contact</a></li>
          <a href="#" id="menu-icon"></a>
          <section class="filter-wrapper">
            <div class="keyword-wrapper">
           <input [formControl]="queryField" type="text" id="keyword" placeholder="Search for artists..." autofocus/>
             </div>
           <ul class="filter-select">
             <li *ngFor="let result of results" class="filter-select-list"><p href="#" class="artist-name">{{result.name}}</p></li>
           </ul>
           </section>
        </ul>

      </nav>
    </div>
</div>

Вот SCSS компонента: 

/* FONT IMPORTED */

/* Fira Sans */
@import url("https://fonts.googleapis.com/css?family=Fira+Sans");
@import url("https://fonts.googleapis.com/css?family=Roboto:400");

$blue: #0097bf;
$white: #fff;
$black: #000;
$text: #424242;

#container {
  width: 100%;
  display: inline-block;
}

/** HEADER */

/** NAVIGATION BAR */
nav {
  background-color: rgb(102, 103, 104);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  .menu-ul {
    text-align: center;
    margin: 0;
    padding: 15px;
    .menu-li {
      display: inline;
      font-family: "Fira Sans", sans-serif;
      font-size: 17px;
      a {
        color: #f2f2f2;
        text-decoration: none;
        padding: 14px;
        &:hover {
          background-color: #556889;
        }
      }
      i{
        font-size:15px;
      }
    }
  }
}

.content {
  text-align: center;
}



.navbar{
  height:12%;
}


.filter-select{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
}

.artist-name{
  display:inline-block;
  padding-bottom: 5px;
  color:black;
}

Большое спасибо за продвинутый уровень.

...