В этом угловом компоненте я пытаюсь использовать матричную кнопку для отображения различных категорий, по которым будет фильтроваться поиск, однако, когда я раскрою опции, они не отображаются под матовой кнопкой, вместо этого они отображаются в левой части стр.
Это ссылка на пример, которому я пытался следовать
Вот HTML-код для компонента
<div class="section categories" id="searchBtnContainer" >
<input id="searchInput" onkeyup="filterSearch()" class="form-control form-control-dark w-50"
type="text" placeholder="Search for a system" aria-label="Search">
<button mat-button id="categorySelection" [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
</div>
Вот CSS для компонента
.section {
width: 100%;
padding-left: 5%;
padding-right: 5%;
/* display: flex;
flex-direction: row;*/
}
.categories {
justify-content: center;
display: flex;
flex-direction: row;
margin: 2em .5em 1em .5em;
}
#searchInput{
margin-right: .5em !important;
}
#categorySelection{
margin-left: .5em !important;
}
button.active{
color: white;
background-color: #03A9F4;
}
.selector{
background-color: white;
margin-right: .5em;
margin-left: .5em;
text-decoration: none;
padding:0.35em 1.2em;
border-style: solid;
border-width: 0.1em;
border-color: #03A9F4;
border-radius: 5px;
}
.selector:hover{
color: white;
background-color: #03A9F4;
}
body {
font-family: Lato;
}
.fill-space {
flex: 1 1 auto;
}
Вот скриншот того, что происходит при нажатии кнопки. Я пытаюсь заставить Item1, Item2 отображаться прямо под кнопкой меню
