I’m using ionic vue + capacitor for my app. i faced an issue in footer,
my app running under ion-tab,
I have a view with ion-footer but keyboard is showed, footer section didn’t show. it didn’t came up.
My code loos like this ,
{{ translate("my_assignments_tab.travel_expense.confirm_with_travelExpense") }} {{ translate("my_assignments_tab.travel_expense.time") }} {{ moment(selectedTempWork.tempWorkDate).format('L') }} {{ moment(selectedTempWork.tempWorkTime).format('HH:mm') }} {{ translate("my_assignments_tab.travel_expense.location") }} {{ selectedTempWork.place }} {{ translate("my_assignments_tab.travel_expense.activity") }} {{ selectedTempWork.assignmentType?.name || '' }} {{ translate("my_assignments_tab.travel_expense.organization") }} {{ selectedTempWork.companyName }}
{{ translate("my_assignments_tab.travel_expense.driving")
}}
{{ moment(driver.date).format('L') }}
{{ driver.expense }} {{ translate("my_assignments_tab.travel_expense.nok") }}
{{ driver.fromLocation }}
→ {{ stop.stopLocation }}
→ {{ driver.toLocation }}
<ion-item-options side="end">
<ion-item-option color="danger" @click="removeDriverExpense(index)">
<ion-icon :src="BinIcon" color="light" class="CardDeleteIcon"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
<!-- Bil receipts -->
<div class="Bill_group" v-for="(recipt, index) in expenseReciptsItems" :key="'recipt-' + index">
<ion-item-sliding>
<ion-item @click="(selectedTempWork.isEdit) && openOutlayModal(selectedTempWork.isEdit, index)">
<ion-chip color="light-blue" mode="ios">{{ translate("my_assignments_tab.travel_expense.bill") }}</ion-chip>
<div class="driverExpenseDate">{{ moment(recipt.createdDateTime).format('L') }}</div>
<div class="driverExpenseAmount">{{ recipt.amount }} <span>{{
translate("my_assignments_tab.travel_expense.nok")
}}</span></div>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger" @click="removeExpenseReceipt(index)">
<ion-icon :src="BinIcon" color="light" class="CardDeleteIcon"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
<div class="button-group">
<!-- <ion-button fill="outline" mode="ios" class="ModalPlusBtn" id="open-action-sheet1">
<ion-icon :icon="addCircleOutline" slot="start"></ion-icon>
{{ translate("my_assignments_tab.travel_expense.add_outlays") }}
</ion-button> -->
<ion-button fill="outline" mode="ios" class="ModalPlusBtn" @click="openAddOutlayActionSheet">
<ion-icon :icon="addCircleOutline" slot="start"></ion-icon>
{{ translate("my_assignments_tab.travel_expense.add_outlays") }}
</ion-button>
<ion-button fill="outline" mode="ios" @click="openDrivingModal(false, -1)" class="ModalPlusBtn">
<ion-icon :icon="addCircleOutline" slot="start"></ion-icon>
{{ translate("my_assignments_tab.travel_expense.add_driving") }}
</ion-button>
</div>
<div class="Bill_Sum" v-if="driverExpenseItems.length > 0 || expenseReciptsItems.length > 0">
{{ translate("my_assignments_tab.travel_expense.sum") }}: <span style="float: right;">{{ totalAmount }} {{
translate("my_assignments_tab.travel_expense.nok") }}</span>
</div>
</ion-content>
<ion-footer class="ModalFooter ModalInsideFooter">
<ion-row>
<ion-col>
<ion-button color="secondary" mode="ios" class="ModalFooterBtn" @click="cancel">
{{ translate("my_assignments_tab.travel_expense.cancel") }}
</ion-button>
</ion-col>
<ion-col>
<ion-button mode="ios" class="ModalFooterBtn" @click="saveTravelExpense" :disabled="isSaveDisabled">
{{ translate("my_assignments_tab.travel_expense.save") }}
</ion-button>
</ion-col>
</ion-row>
</ion-footer>
<ion-modal ref="drivingModal" mode="ios" :is-open="openDrivingView" @ionModalDidDismiss="setOpen(false)"
cssClass="DrivingModal">
<DrivingView :drivingExpenseRequest="drivingExpenseRequest" @add-driving-expense="addDriverExpenseDetails"
class="ModalFooter" @close-driving-modal="closeDrivingModal">
</DrivingView>
</ion-modal>
<ion-modal ref="openDocumentPreviewModal" :is-open="openDocumentPreview" mode="ios"
@ionModalDidDismiss="setOpen(false)" cssClass="DocumentPreviewModal">
<DocumentPreview :receiptItems="receiptItems" :base64ImageString="base64ImageString"
:outlayExpenseRequest="outlayExpenseRequest" @open-photo-library="openPhotoLibrary" @remove-file="removeFile"
@close-document-preview="closeDocumentPreview" @add-outlay-expenses="addExpenseReciptsDetails" @open-add-outlay-action-sheet="openAddOutlayActionSheet"
class="ModalFooter">
</DocumentPreview>
</ion-modal>
<!-- <ion-action-sheet trigger="open-action-sheet1" header="Actions" :buttons="actionSheetButtons()"></ion-action-sheet> -->
<!-- <ion-loading :is-open="isOpenRef" message="Loading" cssClass="GraveLoading" :duration="timeout"
@didDismiss="setOpen(false)">
</ion-loading> -->
</ion-page