Within this Angular component, I am attempting to utilize a mat-button to showcase various categories for the search filter. However, upon expanding the options, they do not appear below the mat-button as intended; instead, they are displayed on the left side of the page.
To see an example that I was trying to follow, check out this link
Below is the HTML code snippet for the component:
<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>
Furthermore, here is the CSS code related to this component:
.section {
width: 100%;
padding-left: 5%;
padding-right: 5%;
}
.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;
}
/* Additional styling omitted for brevity */
.fill-space {
flex: 1 1 auto;
}
Lastly, included is a screenshot depicting the current issue where the items fail to display beneath the Menu button when clicked: