Currently, I am editing a page in Angular 2 and am encountering an issue with height differences during transitions. This inconsistency is causing problems for me.
Can anyone advise on how to fix the height responsively and adjust the size of the custom-control (toggle/switch)?
https://i.sstatic.net/CnPYL.gif
<ng-container *ngIf="!edit; then thenTemplate; else elseTemplate"></ng-container>
<ng-template #thenTemplate>
<div class="row col-12" *ngIf="header && value != null ">
<strong class="col-xs-12 col-md-4">{{header}}</strong>
<p class="col-xs-12 col-md-8">{{onValue == value ? onText : offText}}</p>
</div>
</ng-template>
<ng-template #elseTemplate>
<div class="row col-12" *ngIf="header">
<strong class="col-xs-12 col-md-4">{{header}}</strong>
<div class="col-xs-12 col-md-8 custom-control custom-switch ">
<!-- if add thiss works normaly style="height:2.5rem"-->
<input type="checkbox" class="custom-control-input" id="{{key}}" (change)="onValueChanged($event)" [ngModel]="onValue">
<label class="custom-control-label" for="{{key}}">{{onValue == value ? onText : offText}}</label>
</div>
</div>
</ng-template>