Skip to content

Commit d710cec

Browse files
PLPeetersPLPeeters
committed
Update form field style to avoid display bug
1 parent 2385ed0 commit d710cec

File tree

2 files changed

+21
-21
lines changed

2 files changed

+21
-21
lines changed

‎src/app/components/main/main.component.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1>{{ t('title') }}</h1>
2222
<mat-card-content>
2323
<form [formGroup]="salaryForm" (ngSubmit)="onSubmit()">
2424
<!-- Revenue year -->
25-
<mat-form-field appearance="outline" subscriptSizing="dynamic">
25+
<mat-form-field appearance="fill" subscriptSizing="dynamic">
2626
<mat-label>{{ t('revenue_year') }}</mat-label>
2727
<mat-select formControlName="revenueYear">
2828
<mat-select-trigger>
@@ -49,12 +49,12 @@ <h1>{{ t('title') }}</h1>
4949
</mat-radio-group>
5050

5151
@if (salaryForm.get('workRegime')?.value == 'part_time') {
52-
<mat-form-field appearance="outline" class="extended-width">
52+
<mat-form-field appearance="fill" class="extended-width">
5353
<mat-label>{{ t('worked_time_per_week') }}</mat-label>
5454
<input matInput type="number" formControlName="workedTimePerWeek">
5555
</mat-form-field>
5656
{{ t('out_of') }}
57-
<mat-form-field appearance="outline" class="extended-width">
57+
<mat-form-field appearance="fill" class="extended-width">
5858
<mat-label>{{ t('full_time_work_hours') }}</mat-label>
5959
<input matInput type="number" formControlName="fullTimeHoursPerWeek">
6060
</mat-form-field>
@@ -114,13 +114,13 @@ <h1>{{ t('title') }}</h1>
114114
<tr>
115115
<td class="text-right outline-neighbour-padding">{{ t('children') }}</td>
116116
<td>
117-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
117+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
118118
<mat-label>{{ t('children') }}</mat-label>
119119
<input matInput type="number" min="0" formControlName="numDependentChildren">
120120
</mat-form-field>
121121
</td>
122122
<td>
123-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
123+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
124124
<mat-label>{{ t('children' )}}</mat-label>
125125
<input matInput type="number" min="0" formControlName="numDisabledDependentChildren">
126126
</mat-form-field>
@@ -131,7 +131,7 @@ <h1>{{ t('title') }}</h1>
131131
{{dependentRetireeAgeThreshold}}+
132132
</td>
133133
<td colspan="2">
134-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
134+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
135135
<mat-label>
136136
{{dependentRetireeAgeThreshold}}+
137137
</mat-label>
@@ -142,13 +142,13 @@ <h1>{{ t('title') }}</h1>
142142
<tr>
143143
<td class="text-right outline-neighbour-padding">{{ t('others') }}</td>
144144
<td>
145-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
145+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
146146
<mat-label>{{ t('others') }}</mat-label>
147147
<input matInput type="number" min="0" formControlName="numDependentOthers">
148148
</mat-form-field>
149149
</td>
150150
<td>
151-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
151+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
152152
<mat-label>{{ t('others' )}}</mat-label>
153153
<input matInput type="number" min="0" formControlName="numDisabledDependentOthers">
154154
</mat-form-field>
@@ -163,7 +163,7 @@ <h1>{{ t('title') }}</h1>
163163
</mat-checkbox>
164164

165165
<div *ngIf="salaryForm.get('groupInsurance')?.value">
166-
<mat-form-field appearance="outline">
166+
<mat-form-field appearance="fill">
167167
<mat-label>{{ t('personal_contribution') }}</mat-label>
168168
<input matInput type="number" min="0.01" step="0.01" formControlName="groupInsurancePersonalCotisation">
169169

@@ -187,7 +187,7 @@ <h1>{{ t('title') }}</h1>
187187

188188
<mat-tab [label]="t('single_month')">
189189
<!-- Gross Salary -->
190-
<mat-form-field appearance="outline" class="full-width">
190+
<mat-form-field appearance="fill" class="full-width">
191191
<mat-label>{{ t('gross_salary_title') }}</mat-label>
192192
<input matInput type="number" min="0.01" step="0.01" formControlName="grossSalary">
193193

@@ -199,7 +199,7 @@ <h1>{{ t('title') }}</h1>
199199
</mat-form-field>
200200

201201
<!-- Other Net Income -->
202-
<mat-form-field appearance="outline" class="full-width">
202+
<mat-form-field appearance="fill" class="full-width">
203203
<mat-label>{{ t('other_net_income') }}</mat-label>
204204
<input matInput type="number" min="0" step="0.01" formControlName="otherNetIncome">
205205

@@ -211,7 +211,7 @@ <h1>{{ t('title') }}</h1>
211211
</mat-form-field>
212212

213213
<!-- Holiday Pay -->
214-
<mat-form-field appearance="outline" class="full-width">
214+
<mat-form-field appearance="fill" class="full-width">
215215
<mat-label>{{ t('double_holiday_pay') }}</mat-label>
216216
<input matInput type="number" min="0" step="0.01" formControlName="holidayPay">
217217

@@ -223,7 +223,7 @@ <h1>{{ t('title') }}</h1>
223223
</mat-form-field>
224224

225225
<!-- Bonus -->
226-
<mat-form-field appearance="outline" class="full-width">
226+
<mat-form-field appearance="fill" class="full-width">
227227
<mat-label>{{ t('bonus') }}</mat-label>
228228
<input matInput type="number" min="0" step="0.01" formControlName="bonus">
229229

@@ -250,7 +250,7 @@ <h1>{{ t('title') }}</h1>
250250
<tr *ngFor="let monthlySalaryRow of monthlySalaryRows.controls; let i = index" [formGroupName]="i">
251251
<td class="text-right outline-neighbour-padding">{{ i + 1 }}</td>
252252
<td>
253-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
253+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
254254
<mat-label>{{ t('gross_salary_title') }}</mat-label>
255255
<input matInput type="number" min="0.01" step="0.01" formControlName="grossSalary">
256256

@@ -262,7 +262,7 @@ <h1>{{ t('title') }}</h1>
262262
</mat-form-field>
263263
</td>
264264
<td>
265-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
265+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
266266
<mat-label>{{ t('double_holiday_pay_short') }}</mat-label>
267267
<input matInput type="number" min="0" step="0.01" formControlName="holidayPay">
268268

@@ -274,7 +274,7 @@ <h1>{{ t('title') }}</h1>
274274
</mat-form-field>
275275
</td>
276276
<td>
277-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
277+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
278278
<mat-label>{{ t('bonus') }}</mat-label>
279279
<input matInput type="number" min="0" step="0.01" formControlName="bonus">
280280

@@ -286,7 +286,7 @@ <h1>{{ t('title') }}</h1>
286286
</mat-form-field>
287287
</td>
288288
<td>
289-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
289+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
290290
<mat-label>{{ t('other_net_income') }}</mat-label>
291291
<input matInput type="number" min="0" step="0.01" formControlName="otherNetIncome">
292292

@@ -572,7 +572,7 @@ <h1>{{ t('title') }}</h1>
572572
</mat-card-header>
573573
<mat-card-content>
574574
<form fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutGap="8px grid">
575-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
575+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
576576
<mat-label>{{ t('start') }}</mat-label>
577577
<input matInput type="number" [step]="graphsStep" min="0" [(ngModel)]="graphsStartingSalary" (ngModelChange)="updateChartData()" [ngModelOptions]="{standalone: true}">
578578

@@ -583,7 +583,7 @@ <h1>{{ t('title') }}</h1>
583583
}
584584
</mat-form-field>
585585

586-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
586+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
587587
<mat-label>{{ t('end') }}</mat-label>
588588
<input matInput type="number" [step]="graphsStep" [min]="graphsStartingSalary" [(ngModel)]="graphsEndingSalary" (ngModelChange)="updateChartData()" [ngModelOptions]="{standalone: true}">
589589

@@ -594,7 +594,7 @@ <h1>{{ t('title') }}</h1>
594594
}
595595
</mat-form-field>
596596

597-
<mat-form-field appearance="outline" class="full-width" subscriptSizing="dynamic">
597+
<mat-form-field appearance="fill" class="full-width" subscriptSizing="dynamic">
598598
<mat-label>{{ t('step') }}</mat-label>
599599
<input matInput type="number" step="10" min="10" [(ngModel)]="graphsStep" (ngModelChange)="updateChartData()" [ngModelOptions]="{standalone: true}">
600600

‎src/app/components/main/main.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ mat-list-item mat-list {
170170
padding-top: 24px;
171171
}
172172

173-
td mat-form-field[appearance="outline"] {
173+
td mat-form-field {
174174
margin-top: 8px;
175175
}
176176

0 commit comments

Comments
 (0)