In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below:
.currency-select {
position: absolute;
top: 5px;
right: 80px;
z-index: 1000000;
color: #DD642A;
font-size: 17px;
padding-right: 16px;
width: 130px;
}
.mat-form-field {
display: block;
}
While the styling works perfectly for the selector initially, an issue arises when the dropdown menu is clicked. The structure of the associated HTML code is as follows:
<div class="currency-select">
<mat-form-field *ngIf=loaded>
<mat-select [formControl]="currencyForm" placeholder="Select Currency">
<select-search (search)="filterCurrencyOptions($event)" #selectSearch (keydown)="$event.stopPropagation()" >
</select-search>
<mat-option *ngFor="let currency of filteredCurrencies" [value]="currency.counter_currency_code" (click)="updateCurrency()">
<flag-icon country="{{ (currency.counter_currency_iso_2 || '').toLowerCase() }}"></flag-icon> {{currency.counter_currency_code}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
The problem occurs when clicking on the currency select and finding that the appearance of the dropdown doesn't match expectations. Despite attempting to modify the css within the currency-select.component.html file and using !important, it appears that the styling takes precedence from another div tag called "cdk-overlay-container."
I am seeking guidance on how to properly format the css in the currency-select css file to resolve this issue. Any suggestions or insights would be greatly appreciated.