1. Home
  2. Forum
  3. Angular - EJ 2
  4. Scheduler scroll area not recovering its size after keyboard closed

Scheduler scroll area not recovering its size after keyboard closed

Hello :

In an @ionic/angular 5.5.1 with angular 11.0.3 I have a schedule component. It is rendered fine, but if I try to edit or add any appointment, after de keyboard disappears the space previously occupied remains blank:








This is the css :

.scheduler-wrapper {
height: 100%;
width: 100%;
}

.scroll {
height: 100%;
}

.boats-planner {
.e-timeline-view .e-resource-left-td,
.e-timeline-month-view .e-resource-left-td {
width: 100px;
}
}

@supports(padding: max(0px)) {
.e-quick-popup-wrapper.e-device {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.e-dlg-container {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}



.e-schedule-dialog {
.e-dlg-content {
.e-all-day-time-zone-row,
.e-repeat-parent-row,
.e-recurrenceeditor,
.e-title-location-row {
display: none !important;
}

.custom-field-row {
padding-bottom: 12px;
.custom-field-container {
display: grid;
grid-template-columns: 12fr 1fr;

.e-btn {
margin-top: 12px;
margin-left: 9px;
}
}
}

.e-add-icon::before {
content: "\e95c";
}

.custom-status-field-row {
padding-bottom: 12px;
}

.custom-broker-field-row {
padding-bottom: 12px;
}
}

&.e-device {
.e-dlg-content {
.custom-field-row {
padding-top: 12px;
padding-bottom: 0;
}
.custom-status-field-row {
padding-top: 20px;
padding-bottom: 0;
}

.custom-broker-field-row {
padding-top: 20px;
padding-bottom: 0;
}
}
}
}


And the template :

<ion-header>
<ion-toolbar>
<ion-title>Planningion-title>
<ion-buttons slot="end">
<ion-button (click)="showSettings = !showSettings">
<ion-icon slot="icon-only" name="settings-outline">ion-icon>
ion-button>
ion-buttons>
<ion-list [hidden]="!showSettings" class="toggle-list" lines="full">
<ion-item class="toggle-item">
<ion-label class="toggle-label">Modo compactoion-label>
<ion-toggle color="secondary" (ionChange)="toggleCompactView()">ion-toggle>
ion-item>
<ion-item>
<ejs-daterangepicker>ejs-daterangepicker>`
ion-item>
ion-list>
ion-toolbar>
ion-header>

<ion-content>
<div class="scheduler-wrapper">
<ejs-schedule useSafeArea="true" cssClass='boats-planner' width='100%' height='100%' #scheduler [currentView]='currentView'
dataSource="dataSource" [group]='groupData' [eventSettings]='eventSettings'
(eventRendered)="onEventRendered($event)" (popupOpen)='onPopupOpen($event)' (actionBegin)="onActionBegin($event)" (popupClose)='onPopupClose($event)'>
<e-views>
<e-view option="Month" [timeScale]="weekViewTimeScale">
e-view>
<e-view option="TimelineWeek" [timeScale]="weekViewTimeScale"
[allowVirtualScrolling]="allowVirtualScrollingOnTimelineWeekView" [interval]="timeLineWeekViewInterval"
displayName='Línea sem.'>
e-view>
<e-view option="TimelineMonth" [allowVirtualScrolling]="allowVirtualScrollingOnTimelineMonthView"
[interval]="timeLineMonthViewInterval" displayName='Línea mes'>e-view>
e-views>
<e-resources>
<e-resource [dataSource]="boatsDataSource" field="BoatId" title="Barco" name="Barcos" textField="Name" idField="Id">e-resource>
e-resources>
<ng-template #resourceHeaderTemplate let-data>
<div class='template-wrap'>
<div class="resource-details">
<div class="resource-name">{{data.resourceData.Name}}div>
<div class="resource-designation">{{data.resourceData.Yard}}div>
div>
div>
ng-template>
ejs-schedule>
div>
<app-add-edit-customer #addEditCustomerObj (refreshEvent)="onCustomerAdded($event)">app-add-edit-customer>
ion-content>


How can I do to solve this?.

Thanks




1 Reply
RV Ravikumar Venkatesan Syncfusion Team December 10, 2020 03:44 PM UTC

Hi Vicente, 
  
Greetings from Syncfusion support. 
  
We have validated your reported problem based on your shared details on the Android and iOS devices. But, we are unable to reproduce the problem at our end. We have prepared a sample for your reference and it can be available below. 
  
  
Kindly try the above sample and if you still facing the same problem please share the below details to serve you better. 
  
  • Reproduce the problem in the above-shared sample or
  • Share a simple sample that illustrates the problem which would help us to proceed further.
  
Regards, 
Ravikumar Venkatesan 


Loader.
Up arrow icon