AWS L3 Workshop: How to Fix Invisible Menu Options

Select Language:

If you’ve been working with the AWS Blu Age L3 workshop and noticed that the dropdown menu options in the auto-complete feature aren’t displaying properly, you’re not alone. This problem is caused by styling issues within the Angular component.

Here’s a straightforward way to fix it. First, locate the dynamic-autocomplete.component.ts file in your project. You can make a few changes there to improve how the dropdown looks.

Start by adding panelWidth="auto" to the mat-autocomplete tag. This helps the dropdown panel adjust its width properly. Next, include the following style adjustments to the mat-option tags to ensure the options display correctly:

[ngStyle]=”{‘width’: ‘auto’, ‘min-width’: ‘100%’, ‘max-width’: ‘none’}”

Then, to enforce these styles more broadly, add some CSS to your component’s stylesheet:

css
::ng-deep .mat-autocomplete-panel {
min-width: 100% !important;
max-width: none !important;
width: auto !important;
}
::ng-deep .mat-option {
white-space: nowrap;
overflow: visible;
}

If you’d like an even simpler fix, you can just increase the size parameter in your dynamic-autocomplete component. For example, change the size from the default to 25 like this:

Either of these solutions should make your dropdown options visible and improve the user experience. Give them a try, and your autocomplete menu should work smoothly again.