I have an angular page with 3 components i'm trying to get to fill the entire horizontal space. Currently the parent flexbox div is not expanding to the full length, even though I have width: 100% on it. I am able to change the width using pixel values instead, however I have no idea how wide the viewport is going to be when the page is loaded. I have tried setting the margin and padding to 0, making sure the child flexdivs widths add up to 100%, etc...
Relevant html:
<div fxLayout="row" fxLayoutGap="15px" id="bottomContainer">
<div fxFlex="1 0 40%"><mat-card gdArea="chart">
<mat-card-subtitle>Messages Flagged <br>{{period}}<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button></mat-card-subtitle>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="period = 'Week'; periodInt = 0; changeMessagesFlaggedChartPeriod('Week')">Week</button>
<button mat-menu-item (click)="period = 'Month'; periodInt = 1; changeMessagesFlaggedChartPeriod('Month')">Month</button>
<button mat-menu-item (click)="period = 'Year'; periodInt = 2; changeMessagesFlaggedChartPeriod('Year')">Year</button>
</mat-menu>
<mat-card-content gdAreas="chart | list" gdRows="auto">
<div style="display: block">
<canvas baseChart
[datasets]="this.currentMessagesFlaggedDataset"
[labels]="this.MESSAGES_FLAGGED_LABELS"
chartType="radar"
[options]="this.messagesFlaggedChartOptions"
[colors]="this.channelData.chartColors"
height="100%"
width="100%"
></canvas>
</div>
</mat-card-content>
</mat-card></div>
<div fxFlex="1 1 30%"><mat-card class="mat-elevation-z2 channelUserTableContainer">
<mat-card-subtitle>Most Negative Users</mat-card-subtitle>
<table mat-table class="channelUserTable" [dataSource]="channelData.negativeUsers">
<!-- Username column -->
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef>Username</th>
<td mat-cell *matCellDef="let element"> {{element.username}}</td>
</ng-container>
<!-- Number of flags column -->
<ng-container matColumnDef="numFlags">
<th mat-header-cell class="textAlignRight" *matHeaderCellDef>Number of Flags</th>
<td mat-cell class="textAlignRight" *matCellDef="let element"> {{element.numFlags}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="userTableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: userTableColumns;"></tr>
</table>
</mat-card></div>
<div fxFlex="1 1 30%"><mat-card class="mat-elevation-z2 channelUserTableContainer">
<mat-card-subtitle>Most Positive Users</mat-card-subtitle>
<table mat-table class="channelUserTable" [dataSource]="channelData.positiveUsers">
<!-- Username column -->
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef>Username</th>
<td mat-cell *matCellDef="let element"> {{element.username}}</td>
</ng-container>
<!-- Number of flags column -->
<ng-container matColumnDef="numFlags">
<th mat-header-cell class="textAlignRight" *matHeaderCellDef>Number of Flags</th>
<td mat-cell class="textAlignRight" *matCellDef="let element"> {{element.numFlags}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="userTableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: userTableColumns;"></tr>
</table>
</mat-card></div>
</div>
CSS:
padding-left: 16px;
padding-top: 16px;
}
#channelHeaderText {
font-size: x-large;
font-weight: bold;
}
.mindChartNoMargin :nth-child(1) {
margin: 0;
}
.channelUserTable {
width: 100%;
}
.channelUserTableContainer {
background-color: white;
}
.textAlignRight {
text-align: right;
}
#bottomContainer {
width: 100%;
}
Help is much appreciated
Try moving the width to the container instead, also try making the container a flexbox and the items flex too.
.channelUserTableContainer {
background-color: white;
width: 100%;
display: flex;
}
.channelUserTable {
display: flex;
}
I like to add a dotted line to understand how the flexboxes are working so you could also add a dotted border
border: dotted;
Im trying to create a nice looking table. Because of the content soon to be comming in the matrix part, i cant make it smaller for mobile devices. So i added overflow:auto to get a scroll-bar.
The problem is that the horizontal lines wont extend to the whole table, it cuts off at the part behind the scroll.
Before scrolling
After scrolling
HTML
<ng-container matColumnDef="module">
<mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Module</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.module}} </mat-cell>
</ng-container>
<ng-container matColumnDef="specialisation">
<mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Spec</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'">
<mat-list dense>
<mat-list-item *ngFor="let specialisation of moduleData.specialisation"> {{specialisation}}</mat-list-item>
</mat-list>
</mat-cell>
</ng-container>
<ng-container matColumnDef="period">
<mat-header-cell *matHeaderCellDef [ngClass]="'smallCell'"> Periode</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'smallCell'"> {{moduleData.period}} </mat-cell>
</ng-container>
<ng-container matColumnDef="matrix">
<mat-header-cell *matHeaderCellDef [ngClass]="'matrixCell'"> Matrix</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'matrixCell'"> {{moduleData.matrix}} </mat-cell>
</ng-container>
<ng-container matColumnDef="endRequirements">
<mat-header-cell *matHeaderCellDef [ngClass]="'requirmentCell'"> Eindeisen</mat-header-cell>
<mat-cell *matCellDef="let moduleData" [ngClass]="'requirmentCell'">
<mat-list>
<mat-list-item *ngFor="let requirement of moduleData.endRequirements"> {{requirement}}</mat-list-item>
</mat-list>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let moduleRowData; columns: displayedColumns;"></mat-row>
</mat-table>
Css
.table-container{
height: calc(100vh - 114px);
overflow: auto;
}
.requirmentCell{
flex: 0 0 325px;
}
.matrixCell{
flex: 0 0 550px;
}
.smallCell{
flex: 0 0 110px;
}
edit
Further tinkering around, its not just the border that is cutoff there. Its any css like, background color and the header.
Issue
I am currently implementing a <mat-table> with a <mat-paginator> attached to it. The only problem is that the dropdown for items per page is being offset to the left. For what seems like outside of the Bootstrap container.
Here is an image of what is happening. You can see the location of the dropdown and the location of the items are completely wrong.
Code
My entire site is inside of a bootstrap container so my app.component.html basically looks like this:
<app-header></app-header>
<div class="container mt-3">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
The page in questions is just a simple material table with the pagination added to the bottom.
<div class="row">
<div class="col-md-12">
<mat-table *ngIf="items" [dataSource]="items" matSort>
<!-- ID Column -->
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.type}} </mat-cell>
</ng-container>
<!-- Provider Column -->
<ng-container matColumnDef="provider">
<mat-header-cell *matHeaderCellDef mat-sort-header> Provider </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.provider}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="url">
<mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.url}} </mat-cell>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="country">
<mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.country}} - <span class="flag-icon flag-icon-{{row.country | lowercase}}"></span> </mat-cell>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="updated_on">
<mat-header-cell *matHeaderCellDef mat-sort-header> Updated </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.updated_on}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="['type', 'provider', 'url', 'country', 'updated_on']"></mat-header-row>
<mat-row *matRowDef="let row; columns: ['type', 'provider', 'url', 'country', 'updated_on']">
</mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
</div>
It seems that some css are needed. Just try including in your style.css or style.scss the line
#import "../node_modules/#angular/material/prebuilt-themes/indigo-pink.css";
I can solve this problem finally =D We have known that some css code of Angular overwritten the original css code of the pagination which work with the cdk-overlay-container. That's why I have tried to copy the code out of the file #angular/cdk/overlay-prebuilt.css in my own css-File what has fixed the bug. Afterwards I have looked which components I really needed and that's it:
//Add this to your css/scss File
::ng-deep {
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cdk-overlay-container {
position: fixed;
z-index: 1000;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
}
Now you have the original pagination of Angular if you want a non transparent dropbox selection, add the following lines to .cdk-overlay-pane
background-color: white;
border: 1px solid rgba(128, 128, 128);
import { MatPaginatorModule } from '#angular/material/paginator';
Have you imported Material Pagination Module? If not then please import and try again. Thanks
In most projects, be it boostrap-themed or material-themed, there is usually a theme folder, you would have files like theme-variable.scss and theme.scss for Bootstrap projects, while in material projects, you'd find material-theme.css or material-theme.scss.
The last two files are very important for angular-material components to be rendered properly, even after importing the modules responsible for the component, you need the files mentioned above.
After ensuring you have those two files, you want to import them in your styles.css file with this line: #import './theme/material-theme.css';
Once the above steps are taken, the table or whichever angular-material component will render properly.
On my angular5 application I am using material table to display some data.
Into a mat-header-cell I am having a span and a img together and trying to align them properly.
Here how it looks right now :
Here the piece html code :
<ng-container matColumnDef="batchState">
<mat-header-cell *matHeaderCellDef style="border: 1px solid white;">
<span style="border: 1px solid white;">Batch state </span>
<img style="border: 1px solid white;" src='../../assets/filter_list.png' (click)="filterByState()"
matTooltip="Filter by state" />
</mat-header-cell>
<mat-cell *matCellDef="let inst">
{{inst.batchState}}
</mat-cell>
</ng-container>
I want my span to be displayed at the center-left of the cell, tried text-align:center; left:0px; and padding-top: 25%; padding-bottom: 25% (inside my span element) but those css did not work, any way to achieve that?
Solution found adding css to the mat-header-cell -> display: flex; align-items: center;
<ng-container matColumnDef="batchState">
<mat-header-cell *matHeaderCellDef style="border: 1px solid white;display: flex; align-items: center;">
<span style="border: 1px solid white;">Batch state </span>
<img style="border: 1px solid white;" src='../../assets/filter_list.png' (click)="filterByState()"
matTooltip="Filter by state" />
</mat-header-cell>
<mat-cell *matCellDef="let inst">
{{inst.batchState}}
</mat-cell>
</ng-container>
I have a angular-material card inside here is a mat-table, containing notes.
HTML And CSS Below
<div fxLayout="column" style="flex: 1;">
<mat-card class="card-info" style="margin-right: 10px; max-height: 167px;">
<mat-card-content>
<div class="example-container">
<mat-table #table [dataSource]="notes">
<!-- Name Column -->
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef> Date </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.created | date }} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="subject">
<mat-header-cell *matHeaderCellDef> Subject </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.subject}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="note">
<mat-header-cell *matHeaderCellDef> Note </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</mat-card-content>
</mat-card>
</div>
CSS:
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
mat-header-cell, mat-cell {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Although the text inside the cell does truncate, it doesn't truncate enough and causes the card to grow. I don't want to put a max-width, as I want it to flex to fill remainder of the screen.
Here is an image of how it looks:
As you can see it makes the card grow off the screen.