I am struggling to properly display an Angular Material button and I also need to customize the appearance of an Angular tab. Below is a breakdown of my code.
routes.component.html::
<div class="content-wrapper">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col panel--raised card-top bg-white">
<div class="mdl-grid bottom-r-padding-0">
<div class="mdl-cell mdl-cell mdl-cell--6-col mdl-layout-spacer">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<mat-tab-group>
<mat-tab label="Manage"> Manage</mat-tab>
<mat-tab label="Create">
<form class="example-form">
<table class="example-full-width" cellspacing="0">
<tr>
<mat-form-field appearance="legacy">
<mat-label>Dist</mat-label>
<input matInput placeholder="e.x-Londrina">
</mat-form-field>
</tr>
<tr>
<mat-form-field appearance="standard">
<mat-label>Route</mat-label>
<input matInput placeholder="e.g.: CTA-LDA">
</mat-form-field>
</tr>
<tr>
<button mat-button color="success">Success</button>
</tr>
</table>
</form>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
routes.component.css::
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
td {
padding-right: 8px;
}
/* Success syling */
.mat-button.mat-success,
.mat-stroked-button.mat-success {
color: #155724;
}
The current output of the above code looks like this:
https://i.sstatic.net/X0GPq.png
As shown in the image, the success button does not align properly with the other Angular Material components. My desired output should match the following:
https://i.sstatic.net/preQp.png
In the desired output image above, you can see how I want the page to look. Additionally, I only want an underline below the tab name. Any assistance in resolving this issue would be greatly appreciated.