Ion-footer positioned above keyboard

I have been struggling with a persistent issue and have attempted numerous solutions to resolve it, but the problem persists. When using the web app on Google browser with my phone, I encounter an issue where the footer overlaps with the keyboard. Has anyone found a solution to this problem?

https://i.sstatic.net/I7FLV.png

https://i.sstatic.net/3yd44.png

<ion-header>

</ion-header>

<ion-content>
<form [formGroup]="formGroupLogin" (ngSubmit)="signIn()">
  <ion-grid>
    <ion-row>
      <ion-col size-sm="6" offset-sm="3" size-md="4" offset-md="4">
        <ion-img src="../../assets/rinaldi-logoSVG.svg" style="height: 110px; margin-top: 60px"></ion-img>
        <div style="display: grid; align-items: center; justify-content: center;">
          <h3 id="title-login">Area Riservata</h3>
        </div>
      </ion-col>
    </ion-row>
    <ion-row style="display: flex; justify-content: center; align-items: center;">
      <ion-col size-md ="4">
        <ion-item>
          <ion-label position="floating" style="font-family: Gilmer Medium">Email</ion-label>
          <ion-input type="email" email formControlName="Username"></ion-input>
        </ion-item>
        <span class="error ion-padding" *ngIf="isSubmitted && errorForm.Username.errors?.required">
          Email field is required
        </span>
        <span class="error ion-padding" *ngIf="isSubmitted && errorForm.Username.errors?.email">
          Invalid email format 
        </span>
        <ion-item>
          <ion-label position="floating" style="font-family: Gilmer Medium">Password</ion-label>
          <ion-input type="password" formControlName="Password"></ion-input> 
        </ion-item>
        <span class="error ion-padding" *ngIf="isSubmitted && errorForm.Password.errors?.required">
          Password field is required
        </span>
        <div style="padding-top: 30px">
          <ion-button expand="block" type ="submit" style="--border-radius: 20px; --background: #192437; font-family: Gilmer Medium" >Login</ion-button>
        </div>

        <div style="display: grid; justify-content: center; align-items: center; text-align: center;">
          <a routerLink="/recover-password" style="cursor: pointer; padding-top:10px; font-family: Gilmer Medium">Forgot your password?</a>
          <p style="font-family: Gilmer Medium">Not registered yet?</p>
          <a routerLink="/registration" style="cursor: pointer; font-family: Gilmer Medium">Register</a>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>
</ion-content>

<!-- FOOTER -->
<ion-footer class="ion-no-border" style="display: grid; place-content: center;">
  <ion-toolbar class="ion-text-center">
    <ion-label class="ion-text-wrap" style="font-size: small; font-family: Gilmer Medium;">©2021 Rinaldi Superforni–All rights reserved–
      VAT number 00523850451</ion-label>
  </ion-toolbar>
</ion-footer>

After searching for 2 days for a solution without success, I am reaching out to see if anyone can offer assistance with this issue.

cssangularionic-framework

Answer №1

Back in the days of working on Ionic projects, I encountered an issue where I needed to hide the footer whenever the keyboard was shown. To solve this problem, I implemented the following solution:

<ion-footer translucent="true" class="ion-no-border" *ngIf="footerVisible">
    <ion-row class="ion-align-items-center ion-justify-content-center">
      <ion-col  size="12" class="ion-padding ion-align-items-center ion-justify-content-center" style="color: #acacac; display: flex; justify-content: center;">
        Don't have an Account?
        &nbsp;
        <a class="btn-create-account red" routerLink="/auth/register">Create an account</a>
      </ion-col>
    </ion-row>
</ion-footer>

... and, of course, in the class file:

  ngOnInit() {
    (this.el.nativeElement.querySelectorAll('ion-input'))
      .forEach(inputEl => {
        inputEl.addEventListener('focusin', e => this.footerVisible = false);
        inputEl.addEventListener('focusout', e => this.footerVisible = true);
      });
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Confirm the default value in a text box

I am currently working with a textbox that I have set up as shown below: <div form="form-group"> <label for="Title"> <h3>Title:</h3> </label> <div [ngClass]="{ 'has-errors': (dataProcessingEditFo ...

angularhtmlmean-stack

Ensure that only camelCase is permitted in Angular TSLint configurations, while prohibiting the use of Pascal case

In Angular, we are enforcing the use of lower-case first letter Camel case for code. For instance, if a variable is named ProductName with an uppercase first letter, it should trigger a warning or error. Is there a way to configure TSLint to only allow ca ...

angulartypescripttslintangular10

Sliding Image Menu using jQuery

I am struggling with creating a menu using jquery mouseenter / mouseout effects. My goal is to have a small icon displayed that expands to the left and reveals the menu link when a user hovers over it. The issue I am facing is that the effect only works w ...

javascriptjqueryhtmlcss

Generating form groups programmaticallyORDynamically

I recently utilized angular-archwizard to implement a wizard step with *ngFor However, I encountered an issue on how to create a dynamic formGroup for each step. In the code below, I managed to create a single formGroup for all steps, but my goal is to ha ...

angulartypescript

Enhance the visual appeal of incoming data using Angular Material's dynamic styling feature

Is it possible to enhance the text with some CSS styling to make each item stand out like in this example: https://i.stack.imgur.com/kSyZE.png I prefer not to include a cross button or provide users with the option to add tags. The data is coming from a R ...

cssangularangular-materialangular8

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

How to eliminate the ng-component tag from an Angular 8 table row template

I currently have a dynamic table component with 2 modes: Normal table - functioning properly Custom Row Template - encountering issues due to Angular adding the <ng-component> tag The logic within the TableComponent is not the main concern, it&apo ...

javascripthtmlangulartypescriptangular8

Uploading image files in Angular

In the process of building a project with Angular 4 in Visual Studio Code, a question arises: How can I include images from my desktop into the Visual Studio Code and display them on the view? While it's possible to display images hosted on a server b ...

angulartypescriptasp.net-web-api2visual-studio-code

Angular 2 - Constructing dates in constructor - Error: Type 'Date' cannot be assigned to type 'string'

In my attempt to generate a fresh date object for an ngx-chart by referencing this specific example, I came across the following code snippet: constructor() { this.data = this.multi.map(group => { group.series = group.series.map(dataItem =& ...

angulardatetypescript

The button's background color remains the same even after clicking on it

In my exploration of Vue.js, I decided to create a simple project to grasp the concept of class binding. I wanted to add functionality to each button component, so that when a button is clicked, it would change its color or background color to something ot ...

javascripthtmlcssvue.jsbutton

What is preventing 100% width from filling the entire screen?

My issue involves setting the body with a width of 100% and height as auto. However, the content is not covering the full screen and an extra scrollbar is appearing from left to right. For the complete code and results, please visit the following links: ...

htmlcssbootstrap-4

Bootstrap: Right aligning text labels

I need help with aligning a text label to the right using Bootstrap 5. Currently, when I use the following code: <div class="form-floating text-dark text-end float-right"> <input type="password" class="form-control text- ...

cssbootstrap-5

Having trouble retrieving the JSON data from the getNutrition() service method using a post request to the Nutritionix API. Just started exploring APIs and using Angular

When attempting to contact the service, this.food is recognized as a string import { Component, OnInit } from '@angular/core'; import { ClientService } from '../../services/client.service'; import { Client } from '../../models/Cli ...

angulartypescript

Ensure the main page occupies the entire screen without the need for scrolling

Can someone help me with my Vue app? I need to figure out how to make the start page full screen without any scroll bars in the main window at any scale. The scrollbar should be located within "div class="bottom-center". <script setup> import Comp fr ...

cssvue.jsflexbox

Achieving a frosted glass effect for your background without relying on a background image

I am currently working on creating a modal window in React with a blurred backdrop. My goal is to blur the backdrop content while keeping the background image clear, as there is no image behind the modal window, just content. I have explored various soluti ...

htmlcssreactjssass

Error Encountered: Unresolved Template Issue - MatDivider

Encountering the following issue: Uncaught Error: Template parse errors: More than one component matched on this element. Ensure that only one component's selector can match a given element. Conflicting components: MatDivider,MatDivider (" {{head ...

angular

What is the best way to resize the image to fill half of the screen?

I am trying to make sure that the image fits 50% of the screen height of the device and not just 50% of the current screen size, which may have been minimized by the user. I also want the image to stay fixed in size even when the user resizes the screen. ...

javascripthtmlcss

The Angular Universal client side appears to be inactive

My server-side rendered application is up and running, but I'm encountering an issue where the client-side functionality seems to be missing. Despite the routes rendering properly, none of the click events or console logs are working on the client sid ...

angularangular5angular-universal

aligning an image in the center of a webpage

I have created a simple HTML code to center an image inside the body of an HTML page. It works perfectly on Windows with various browsers, and on phones vertically when rotated. However, the issue arises when I open the site on a Mac as the centering doe ...

jqueryhtmlcsstwitter-bootstrap

Utilize Angular Guards and RxJS to coordinate the flow of data between parent and child Guards. Ensure that the Child Guard waits for the parent

Is it possible to validate data in a child component's guard that was fetched from the parent's guard? I have parent components with employees and used a guard to fetch data from the server. Now, I want to verify this data in the child component& ...

angularrxjs