Conceal the footer on ionic application when the keyboard is present

Currently, I am encountering a problem with the footer-bar on a specific page. When an input field is focused, the keyboard pops up and causes the footer to overlap with it.

HTML Code Snippet:

<ion-view>
    <ion-content>
        <!-- Content goes here -->
    </ion-content>
    <div class="bar dash-footer-col dash-footer bar-footer">
        <div class="row">
            <div class="col dash-footer-col mycharts-footer-col footertopredboarder" <img src="img/icons/1.png" ng-click="go('home')">
                <div>
                    <h5>HOME</h5>
                </div>
            </div>
            <div class="col dash-footer-col mycharts-footer-col footer-top-boarder " ng-click="go('profile')">
                <img src="img/icons/2.png">
                <div>
                    <h5>PROFILE</h5>
                </div>
            </div>
            <div class="col dash-footer-col mycharts-footer-col footer-top-boarder" style="padding-top:0px;" ng-click="go('contact')">
                <img class="weather-icon" src="img/icons/3.png">
                <div style="height:1em;">
                    <h5>CONTACT</h5>
                </div>
            </div>
            <div class="col dash-footer-col mycharts-footer-col footer-top-boarder" ng-click="go('logout')">
                <img src="img/icons/4.png">
                <div>
                    <h5>LOGOUT</h5>
                </div>
            </div>
        </div>
    </div>
</ion-view>

I attempted to address this issue by including the following line in app.js. However, although the footer now disappears, there is still a flickering problem present. Are there any alternative solutions to hide the footer when the keyboard appears? Any assistance would be greatly appreciated. Thank you.

Gratefully,

htmlcssangularjsionic-framework

Answer №1

If you're looking to hide content when the keyboard opens, you can utilize the class "hide-on-keyboard-open"

<div class="hide-on-keyboard-open">

For more information, check out the Ionic Keyboard Plugin documentation

Answer №2

 window.addEventListener('native.keyboardshow', function(){
        document.body.classList.add('keyboard-active');
    });

  window.addEventListener('native.keyboardhide', function(){
        document.body.classList.remove('keyboard-active');
    });

If you give this a shot (on execute()), simply insert the appropriate CSS style and everything should work smoothly.

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

I am looking to edit specific lines of HTML code on a website in order to automatically select a checkbox. Is this possible?

I'm currently attempting to automate the process of increasing bids on a particular website every two hours. However, the site requires users to manually select checkboxes next to the lots they want to raise their offers on. The issue is that the che ...

pythonhtmlseleniumparsingbeautifulsoup

How to retrieve all the text inside an element using Protractor and Selenium

<div class="test"> <span> <div>CONTENT </div> </span> <div> <ul> <li> <span>More text</span> EXAMPLE1</li> <li>EXAMPLE2</li> ...

javascriptangularjsseleniumselenium-webdriverprotractor

Flex and scrollbar problem when using Edge or Internet Explorer

Encountering an issue with Edge/IE when using flexbox. To prevent content overflow, overflow-x: auto is used. With a column flex direction and flex-grow:1 on content items, overflow-y should not be necessary. However, the scrollbar appears above the conten ...

htmlcssflexboxscrollbarmicrosoft-edge

Apply the :after pseudo-class to the specified element

I am struggling with implementing an overlay effect on two images on my website. My goal is to add an overlay when the images are clicked, and I have tried creating this effect using the after pseudo class. Unfortunately, the overlay does not seem to wor ...

javascriptjqueryhtmlcss

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

javascriptjqueryhtmlcsstwitter-bootstrap

Incorrect placement of rectangle on a dynamic canvas

After clicking on two different positions on the canvas rectangle, I noticed that it was being drawn in the wrong location due to issues with the responsive canvas size. Despite attempting to scale the pointer position based on both the canvas and window w ...

htmlresponsive-designfabricjs

Strategies for redesigning a platform to optimize for mobile app development

I am currently in the process of enhancing a user-facing portal that was originally built using Python 2.7, Django 1.6, and MySQL. Our goal now is to transition this portal into a mobile app, which poses a challenge due to the tight coupling of templates, ...

pythondjangoangularjsherokuarchitecture

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

javascriptjqueryhtmlangularjsfunction

What are the steps for applying a Bootstrap class to an element?

I keep encountering this error in the console: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('si col-md-4') contains HTML space characters, which are not valid in tokens. Below is a ...

javascriptjqueryhtmltwitter-bootstrapfirebase

Various web browsers (display: -webkit-inline-box;)

Recently, I encountered an issue with my CSS code: .tudo ul { width: 100%; margin: 0px; display: -webkit-inline-box; } Surprisingly, Mozilla Firefox does not recognize the following line: display: -webkit-inline-box; Is it possible to set d ...

cssbrowser

Google+ login is functional on browsers but not on smartphones when using Ionic 2

Successfully logged in using Google+ on my app. It works fine when checked on Chrome/Explorer, but on my smartphone or Android emulator, after pressing "login with Google+", it shows a successful login message but stays on the same login page without progr ...

angularionic-frameworkionic2ionic-viewionic-popup

Elements of <nav> within a <footer> section

I've recently started using HTML5 display elements like header, footer, and nav. While reading about the nav element in particular, I found this interesting information in the HTML5 spec: The nav element is primarily intended for major navigation b ...

htmlcss

Capture user input to extract data from a JavaScript object

I need help with implementing a search function where users can enter a name and the person's extension will be displayed on the UI either by clicking a button or pressing "return". Any ideas on how to make this feature work seamlessly? UI <html ...

javascripthtmlobjectsearchuser-input

I am having trouble setting margins for a sticky position in a WordPress website

Can someone help me reposition the left-sidebar with a sticky top to be below the main header when scrolling down? Adding margin-top to sticky-top under col-sm-1 is not working. <style> .col-sm-1 .sticky-top { margin-top: 50px} </style> ...

csswordpressbootstrap-4

The z-index property is affected by CSS transform

I have encountered multiple questions on this issue, but none of the suggested solutions seem to work for me. I have a grid of boxes with CSS transforms applied to each. Upon page load, jQuery appends an invisible pop-up <div> to each box. When hover ...

jqueryhtmlcsstransformz-index

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

htmlcssp5.js

Ensure that the top border is aligned perfectly with the top of the page while keeping the text in its

I am a beginner student working on my very first project, so I appreciate your patience as I learn. Currently, I am trying to add a hover effect to the navigation bar links where a blue bar appears at the top of the link and touches the border of the page ...

htmlcssflexbox

A guide on transferring files to a PHP server using HttpClient and FormData within an Ionic framework, along with instructions on receiving files in PHP

I have an input file in mypage.html on Ionic and I want to send this file to PHP for uploading it onto the server. In mypage.page.html, I have created an input field for the file name and another input field for the file to be uploaded. <ion-header> ...

phpangularionic-frameworkfile-upload

Exporting headers of an HTML table using Jquery to Excel is not functioning properly

I need assistance with exporting an HTML Table that is dynamically generated based on the data. The table layout is defined before the data is populated, and once the data is queried, rows are added to the table dynamically. <table id="findCntrctTable" ...

jqueryhtmlexcel

Set the div element to be horizontally aligned

Is there a way to make this display horizontally instead of vertically, from left to right rather than top to bottom? I attempted using display:flex but only the extra-text class is affected and not the outer div. https://i.stack.imgur.com/2DNoC.png .m ...

htmlcss