Fix about the width on mobile view

of the grid
This commit is contained in:
Sébastien André
2020-01-13 17:26:07 +01:00
parent 79deeb4c2a
commit a789779116
3 changed files with 22 additions and 3 deletions

View File

@@ -7,3 +7,13 @@ table {
height: 600px;
overflow: auto;
}
.mat-row td {
padding: 15px;
}
.spanWithBreakWord {
display: inline-block;
min-width: 200px;
word-wrap: break-word;
}

View File

@@ -20,7 +20,10 @@
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}} <a href='http://{{element.website}}'>ici</a></td>
<td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.name"></span>
<a href='http://{{element.website}}'>ici</a>
</td>
</ng-container>
<ng-container matColumnDef="latitude">
@@ -34,7 +37,9 @@
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef>Address</th>
<td mat-cell *matCellDef="let element"><span [innerHTML]="element.address"></span></td>
<td mat-cell *matCellDef="let element">
<span class="spanWithBreakWord" [innerHTML]="element.address"></span>
</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>E-mail</th>

View File

@@ -1,16 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SkydivelogsApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>