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; height: 600px;
overflow: auto; 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"> <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th> <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>
<ng-container matColumnDef="latitude"> <ng-container matColumnDef="latitude">
@@ -34,7 +37,9 @@
<ng-container matColumnDef="address"> <ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef>Address</th> <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>
<ng-container matColumnDef="email"> <ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>E-mail</th> <th mat-header-cell *matHeaderCellDef>E-mail</th>

View File

@@ -1,16 +1,20 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>SkydivelogsApp</title> <title>SkydivelogsApp</title>
<base href="/"> <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 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/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>