Mixing
Center Material Table header and its input in Angular
0
I have a problem which is a little different from the others questions asked here about centering the material headers, but so far I can't seem to make the css work.
Here's my problem : I want to make the columns aligned on the center along with the input in the ng container which is utilized as a filter for each column. I can't make it work so far, here's my HTML and what I've tried for the css.
::ng-deep .mat-header-container {
justify-content: center;
}
.title-center {
margin: 0 auto;
}
td {
text-align: center;
}
.mat-cell, .mat-header-cell {
border: 1px solid grey;
padding: 5px;
}
.mat-header-cell {
font-size: 15px;
height: 50px;
width: 9%;
color:black;
background-color: #f1f1f1;
display:flex;
justify-content:flex-end;
}<div>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- 1st Column -->
<ng-container matColumnDef="business_unit">
<th mat-header-cell *matHeaderCellDef> Business Unit
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="business_unitFilter" placeholder="">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
</ng-container>
<!-- 2nd Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name
<br>
<mat-form-field>
<input matInput class="form-field" [formControl]="nameFilter" placeholder="">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
Here's what my columns look like atm (I'm trying to have the two columns names centered along with the filter input)
angular datatable header center material asked Jan 2 at 9:30
MichMich
49110
add a comment |
0
I have a problem which is a little different from the others questions asked here about centering the material headers, but so far I can't seem to make the css work.
Here's my problem : I want to make the columns aligned on the center along with the input in the ng container which is utilized as a filter for each column. I can't make it work so far, here's my HTML and what I've tried for the css.
::ng-deep .mat-header-container {
justify-content: center;
}
.title-center {
margin: 0 auto;
}
td {
text-align: center;
}
.mat-cell, .mat-header-cell {
border: 1px solid grey;
padding: 5px;
}
.mat-header-cell {
font-size: 15px;
height: 50px;
width: 9%;
color:black;
background-color: #f1f1f1;
display:flex;
justify-content:flex-end;
}<div>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- 1st Column -->
<ng-container matColumnDef="business_unit">
<th mat-header-cell *matHeaderCellDef> Business Unit
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="business_unitFilter" placeholder="">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
</ng-container>
<!-- 2nd Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name
<br>
<mat-form-field>
<input matInput class="form-field" [formControl]="nameFilter" placeholder="">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
Here's what my columns look like atm (I'm trying to have the two columns names centered along with the filter input)
angular datatable header center material asked Jan 2 at 9:30
MichMich
49110
add a comment |
0
0
0
I have a problem which is a little different from the others questions asked here about centering the material headers, but so far I can't seem to make the css work.
Here's my problem : I want to make the columns aligned on the center along with the input in the ng container which is utilized as a filter for each column. I can't make it work so far, here's my HTML and what I've tried for the css.
::ng-deep .mat-header-container {
justify-content: center;
}
.title-center {
margin: 0 auto;
}
td {
text-align: center;
}
.mat-cell, .mat-header-cell {
border: 1px solid grey;
padding: 5px;
}
.mat-header-cell {
font-size: 15px;
height: 50px;
width: 9%;
color:black;
background-color: #f1f1f1;
display:flex;
justify-content:flex-end;
}<div>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- 1st Column -->
<ng-container matColumnDef="business_unit">
<th mat-header-cell *matHeaderCellDef> Business Unit
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="business_unitFilter" placeholder="">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
</ng-container>
<!-- 2nd Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name
<br>
<mat-form-field>
<input matInput class="form-field" [formControl]="nameFilter" placeholder="">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
Here's what my columns look like atm (I'm trying to have the two columns names centered along with the filter input)
angular datatable header center material asked Jan 2 at 9:30
MichMich
49110
I have a problem which is a little different from the others questions asked here about centering the material headers, but so far I can't seem to make the css work.
Here's my problem : I want to make the columns aligned on the center along with the input in the ng container which is utilized as a filter for each column. I can't make it work so far, here's my HTML and what I've tried for the css.
::ng-deep .mat-header-container {
justify-content: center;
}
.title-center {
margin: 0 auto;
}
td {
text-align: center;
}
.mat-cell, .mat-header-cell {
border: 1px solid grey;
padding: 5px;
}
.mat-header-cell {
font-size: 15px;
height: 50px;
width: 9%;
color:black;
background-color: #f1f1f1;
display:flex;
justify-content:flex-end;
}<div>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- 1st Column -->
<ng-container matColumnDef="business_unit">
<th mat-header-cell *matHeaderCellDef> Business Unit
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="business_unitFilter" placeholder="">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
</ng-container>
<!-- 2nd Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name
<br>
<mat-form-field>
<input matInput class="form-field" [formControl]="nameFilter" placeholder="">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
Here's what my columns look like atm (I'm trying to have the two columns names centered along with the filter input)
::ng-deep .mat-header-container {
justify-content: center;
}
.title-center {
margin: 0 auto;
}
td {
text-align: center;
}
.mat-cell, .mat-header-cell {
border: 1px solid grey;
padding: 5px;
}
.mat-header-cell {
font-size: 15px;
height: 50px;
width: 9%;
color:black;
background-color: #f1f1f1;
display:flex;
justify-content:flex-end;
}<div>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- 1st Column -->
<ng-container matColumnDef="business_unit">
<th mat-header-cell *matHeaderCellDef> Business Unit
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="business_unitFilter" placeholder="">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
</ng-container>
<!-- 2nd Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name
<br>
<mat-form-field>
<input matInput class="form-field" [formControl]="nameFilter" placeholder="">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons></mat-paginator>
</div>::ng-deep .mat-header-container {
justify-content: center;
}
.title-center {
margin: 0 auto;
}
td {
text-align: center;
}
.mat-cell, .mat-header-cell {
border: 1px solid grey;
padding: 5px;
}
.mat-header-cell {
font-size: 15px;
height: 50px;
width: 9%;
color:black;
background-color: #f1f1f1;
display:flex;
justify-content:flex-end;
}<div>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- 1st Column -->
<ng-container matColumnDef="business_unit">
<th mat-header-cell *matHeaderCellDef> Business Unit
<div>
<mat-form-field>
<input matInput class="form-field" [formControl]="business_unitFilter" placeholder="">
</mat-form-field>
</div>
</th>
<td mat-cell *matCellDef="let element"> {{element.business_unit}} </td>
</ng-container>
<!-- 2nd Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name
<br>
<mat-form-field>
<input matInput class="form-field" [formControl]="nameFilter" placeholder="">
</mat-form-field>
</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons></mat-paginator>
</div>asked Jan 2 at 9:30
MichMich
49110
asked Jan 2 at 9:30
MichMich
49110
edited Jan 2 at 9:54
Mich
asked Jan 2 at 9:30
MichMich
49110
asked Jan 2 at 9:30
MichMich
49110
asked Jan 2 at 9:30
MichMich
49110
49110
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Try this
mat-cell {
display: flex !important;
justify-content: center !important;
}
mat-header-cell {
color: #4c2929;
font-size: 1.3vw;
display: flex;
justify-content: center;
}
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003947%2fcenter-material-table-header-and-its-input-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try this
mat-cell {
display: flex !important;
justify-content: center !important;
}
mat-header-cell {
color: #4c2929;
font-size: 1.3vw;
display: flex;
justify-content: center;
}
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
add a comment |
0
Try this
mat-cell {
display: flex !important;
justify-content: center !important;
}
mat-header-cell {
color: #4c2929;
font-size: 1.3vw;
display: flex;
justify-content: center;
}
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
add a comment |
0
0
0
Try this
mat-cell {
display: flex !important;
justify-content: center !important;
}
mat-header-cell {
color: #4c2929;
font-size: 1.3vw;
display: flex;
justify-content: center;
}
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
Try this
mat-cell {
display: flex !important;
justify-content: center !important;
}
mat-header-cell {
color: #4c2929;
font-size: 1.3vw;
display: flex;
justify-content: center;
}
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
answered Jan 2 at 9:37
Anil Kumar Reddy AAnil Kumar Reddy A
94111
94111
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003947%2fcenter-material-table-header-and-its-input-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
