0
1.8K
ViewsHow to align mat-button with mat-input?
How can I get these two items to align properly? I am trying to get them perfectly aligned but adjusting the button height just makes the bottom have get further away from the bottom of the search input. I think its because the center of them are not aligned so adjusting the height isn't really the correct solution.
Here's the HTML
<!-- Search Box and Button-->
<p>Search by company name:</p>
<mat-form-field appearance="outline">
<mat-label>Search</mat-label>
<input matInput placeholder="Search">
</mat-form-field>
<button mat-stroked-button color="primary">Search</button>
Here's the SCSS:
mat-form-field.mat-form-field {
font-size: 12px;
width: 300px;
}
button.mat-stroked-button {
font-size: 14px;
height: 42px;
margin: 10px;
}
·
Santiago Trujillo
1 answers
Answer question0
To achieve horizontal alignment you need to make some adjustment in markup and use flex properties for perfect alignment. I have added few div as parent but if you want you can assign CSS to actual parent classes of your code. I have added my snippet code below, update HTML and CSS accordingly :
.searchcontainer {
text-align:center;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.searchcontainer .search-part {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
mat-form-field.mat-form-field {
font-size: 12px;
width: 300px;
}
button.mat-stroked-button {
font-size: 14px;
height: 42px;
margin: 10px;
}<div class="searchcontainer">
<p>Search by company name:</p>
<div class="search-part">
<mat-form-field appearance="outline">
<mat-label>Search</mat-label>
<input matInput placeholder="Search">
</mat-form-field>
<button mat-stroked-button color="primary">Search</button>
</div>
</div>
·
Santiago Trujillo
Report
Answer question