I want to adjust the search bar so it’s the same height as the “Add Users” button? It would be great to have them match.
This is my CSS
CSS
.cardWithShadow {
margin-bottom: 20px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.right-actions {
display: flex;
align-items: center;
}
.search-field {
width: 200px;
/* Adjust the width as needed */
margin-right: 16px;
/* Space between search field and button */
}
.search-field .mat-form-field-flex {
height: 36px;
/* Match button height */
align-items: center;
}
.search-field .mat-form-field-infix {
padding: 0 8px;
/* Adjust padding */
height: 36px;
/* Match button height */
display: flex;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.12);
/* Border to match button */
border-radius: 4px;
/* Border radius to match button */
background-color: #fff;
/* Background color */
}
.add-user-button {
height: 36px;
/* Match search field height */
}
.table-container {
margin-top: 20px;
}
This is my Angular Material html page
html Angular material
<mat-card class="cardWithShadow">
<mat-card-content>
<div class="card-header">
<mat-card-title>Users</mat-card-title>
<div class="right-actions">
<div class="search-bar">
<mat-form-field appearance="outline" class="search-field">
<mat-label>Search</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Search Users">
</mat-form-field>
</div>
<button mat-raised-button color="primary">Add Users</button>
</div>
</div>
</mat-card-content>
</mat-card>
<div class="table-container">
.............
</div>
I want to adjust the search bar so it’s the same height as the “Add Users” button? It would be great to have them match.please assist in standardizing the height parameters so that the search bar matches the button exactly