When examining the code provided, I have noticed the clr-select-container with specific attributes as depicted. In the screenshot attached, it displays the clr-select-container.
The issue that I am encountering is that the inverted arrow is positioned a few pixels away from the clr-select-container. My intention is to have it placed at the end of the clr-select-container, similar to the other instances of clr-select-container shown in the screenshot.
These other clr-select-container are constructed using the same methodology employed for the one mentioned in the provided code snippet.
I am unsure why the remaining clr-select-container have properly aligned inverted arrows, while the one in the code does not.
I trust that my point is clear.
CODE:
<div *ngIf="true" id="idAppRatesSelectionDiv">
<clr-select-container id="idAppRatesSelectionContainer">
<label id="idAppRatesLablel"> {{"LABELS.App_Rate" | translate }}:</label>
<select id="idAppRatesSelectionMenu" clrSelect name="appRatesTypes" [(ngModel)]="iAppRatesSelectionPasser.appRateSelected" (change)="onAppRateSelected($event)">
<option *ngFor="let appRateOfProduct of appRatesOfProduct" [ngValue]="appRateOfProduct">{{appRateOfProduct}}</option>
</select>
</clr-select-container>
</div>
IMAGE: