In my project, I have created a table with Start date and End Date as two table data elements. I have implemented some validations that are triggered when certain conditions are not met. However, I noticed that when these validations are fired, it causes the layout of other table data elements to shift slightly downwards, as shown in the screenshot below: https://i.sstatic.net/LES23.png
On the other hand, when the validations do not occur, everything works smoothly as expected:
https://i.sstatic.net/IKQuE.png
Below is the code snippet I used for this table:
<table *ngIf="isRecurrenceSelected">
<tr>
<td style="width:200px">
<div class="form-group" *ngIf="minStartDate && isStartDateTimeVisible">
<div class="form-inline">
<date-time-selection ref-start="ngModel" name="startDateTime"
[minDate]="minStartDate"
[(ngModel)]="startDateTime"
(ngModelChange)="startTimeChanged($event)"
[isRecurrenceSelectedFromEquipmentSchedule]="isRecurrenceSelected">
{{ (isRecurrenceSelected ? "RUNTIME.SHARED.BASE_SCHEDULE_CHANGE_DIALOGS.RECURRENCE_START_DATE" : "RUNTIME.SHARED.BASE_SCHEDULE_CHANGE_DIALOGS.START_DATE_TIME") | translate:lang }}
</date-time-selection>
</div>
<div *ngIf="start.errors && start.dirty" class="help-block"gt;
<div *ngIf="start.errors.dateTimeSelectionValid" class="text-danger" l10nTranslate>RUNTIME.INPUT_DATA.COMMON_ERRORS.E_START_REQUIRED</div>
<div *ngIf="start.errors.dateComesAfter" class="text-danger" l10nTranslate>RUNTIME.INPUT_DATA.COMMON_ERRORS.E_START_NOT_CURRENT_FOR_ALL_DAY</div>
<div *ngIf="start.errors.dateInRange?.minError" class="text-danger" l10nTranslate>
RUNTIME.INPUT_DATA.COMMON_ERRORS.E_START_IN_PAST
</div>
</div>
</div>
</td>
<td style="width:200px; padding-left:5px">
<div class="form-group" *ngIf="minEndDate && isEndDateTimeVisible && !endTimeOptional">
<div class="form-inline">
<date-time-selection ref-end="ngModel" name="endDateTime"
[minDate]="minEndDate"
[(ngModel)]="endDateTime"
(ngModelChange)="endTimeChanged($event)"
[disabled]="!isEndDateTimeEditable"
[jciDateComesAfter]="!isAllDay && startDateTime"
[isDateOnly]="isAllDay"
jciDateTimeSelectionValid
[jciDateInRange]="{compareDatesOnly: isAllDay, includeHourBoundary: isAllDay}" [isRecurrenceSelectedFromEquipmentSchedule]="isRecurrenceSelected">
{{ (isRecurrenceSelected ? "RUNTIME.SHARED.BASE_SCHEDULE_CHANGE_DIALOGS.RECURRENCE_END_DATE" : "RUNTIME.SHARED.BASE_SCHEDULE_CHANGE_DIALOGS.END_DATE_TIME") | translate:lang }}
</date-time-selection>
<div *ngIf="!isRecurrenceSelected && options.scheduleCategory!=='equipment'" class="allDayContainer">
<div *ngIf="isAllDayAllowed" class="allDayContainer">
<input id="allDay" name="allDay" type="checkbox"
[(ngModel)]="isAllDay"
(ngModelChange)="onAllDayChanged($event)" />
<label for="allDay">All day schedule</label>
</div>
</div>
</div>
<div *ngIf="end.errors && end.dirty" class="help-block">
<div *ngIf="end.errors.jciDateTimeSelectionValid" class="text-danger" l10nTranslate>RUNTIME.INPUT_DATA.COMMON_ERRORS.E_END_REQUIRED</div>
<div *ngIf="end.errors.jciDateComesAfter" class="text-danger" l10nTranslate>RUNTIME.INPUT_DATA.COMMON_ERRORS.E_START_END_FLIPPED</div>
<div *ngIf="end.errors.jciDateInRange?.minError" class="text-danger" l10nTranslate>
RUNTIME.INPUT_DATA.COMMON_ERRORS.E_END_IN_PAST
</div>
</div>
</div>
</td>
</tr>
</table>
I am currently struggling to identify the necessary CSS adjustments to bring the layout of the other TD element in line with the first one.