I need assistance with adjusting the layout of a dropdown list next to its label in an Angular html page.
<div *ngIf="this.userRole == 'myrequests'" class="col-2" [ngClass]="{ 'd-none': view != 'list' }" id="statusFilter">
<label class="font-weight-bold text-secondary" for="statusFilter">Filter By Status:</label>
<select style="display: inline-block;"
name="statusFilter"
[(ngModel)]="statusFilter"
class="form-control"
(change)="setStatusFilter()">
<option [value]="'none'" disabled selected><strong> Choose Filter: </strong></option>
<option *ngFor="let status of statuses" [value]="status.name">
{{ status.name }}
</option>
</select>
</div>
The TypeScript file includes the following array:
statuses = [
{ id: 0, name: "All" },
{ id: 1, name: "Approved" },
{ id: 2, name: "Created" },
{ id: 3, name: "Rejected" },
{ id: 4, name: "Cancelled" },
{ id: 5, name: "Approval Pending" },
];
I am aiming for the label and dropdown list to be on the same line, unlike the current setup portrayed in this image: https://i.sstatic.net/KPCHv.png