MOBILE-2768 policy: Fix table width
parent
03df67b739
commit
5d96c5a339
|
@ -28,7 +28,8 @@
|
||||||
</ion-card>
|
</ion-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table *ngIf="isTablet && policies.length" class="core-table x-scrollable core-policy-tablet-container">
|
<div class="x-scrollable core-policy-tablet-container">
|
||||||
|
<table *ngIf="isTablet && policies.length" class="core-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{{ 'core.policy.policydocname' | translate }}</th>
|
<th>{{ 'core.policy.policydocname' | translate }}</th>
|
||||||
|
@ -48,6 +49,7 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div *ngIf="!isTablet && policies.length" class="core-policy-mobile-container">
|
<div *ngIf="!isTablet && policies.length" class="core-policy-mobile-container">
|
||||||
<ng-container *ngFor="let policy of policies">
|
<ng-container *ngFor="let policy of policies">
|
||||||
|
|
|
@ -75,7 +75,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
table.core-policy-tablet-container {
|
.core-policy-tablet-container table {
|
||||||
th {
|
th {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@include padding-horizontal(24px, 0px);
|
@include padding-horizontal(24px, 0px);
|
||||||
|
@ -83,7 +83,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
min-width: 200px;
|
|
||||||
text-wrap: nowrap;
|
text-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -21,8 +21,8 @@
|
||||||
</ion-card>
|
</ion-card>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container *ngIf="!isCardLayout">
|
<div *ngIf="!isCardLayout" class="x-scrollable">
|
||||||
<table class="core-table x-scrollable">
|
<table class="core-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th *ngFor="let header of state.report.data.headers">
|
<th *ngFor="let header of state.report.data.headers">
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</ng-container>
|
</div>
|
||||||
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
|
@ -2031,6 +2031,11 @@ ion-datetime-button p {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.x-scrollable {
|
||||||
|
overflow-x: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
// Table App styles
|
// Table App styles
|
||||||
table.core-table {
|
table.core-table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
@ -2039,11 +2044,6 @@ table.core-table {
|
||||||
margin: 1em auto;
|
margin: 1em auto;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
|
||||||
&.x-scrollable {
|
|
||||||
overflow-x: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead th {
|
thead th {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
Loading…
Reference in New Issue