referred to this link:
Hide footer on keyboard open Ionic3
But then also issue is the same
Issue is same as in above image.... I have just added button in footer...
.html file
<ion-content>
<textarea placeholder="Please leave your review"></textarea>
<ion-content>
<ion-footer>
<ion-button (click)="submit()">Submit</ion-button>
</ion-footer>
So, When click on textarea, keyboard opens and the buttons appears to be above the keyboard.
I want whenever the keyboard opens.....the footer get hide.
IONIC 4
Step:1 You need to install native keyboard plugin for using keyboard methods. You can install it from here.
Step:2 Then import it in your page.ts file like this
import { Keyboard } from '#ionic-native/keyboard/ngx';
Step:3 Then put it in the providers under #Component as
#Component({
providers: [Keyboard]
})
Step:4 After that , make a constructor for keyboard in your class in constructor section. Repeat same step 2-4 in your app.component.ts file
constructor(public keyboard:Keyboard) {
}
Step:5 Then take a variable to default hide keyboard on load of the page as in your class:
isKeyboardHide=true;
Step:6 After that, all you need to call default methods of keyboard in ionWillEnter method and on show put the variable value as false for showing keyboard.
ionViewWillEnter() {
this.keyboard.onKeyboardWillShow().subscribe(()=>{
this.isKeyboardHide=false;
// console.log('SHOWK');
});
this.keyboard.onKeyboardWillHide().subscribe(()=>{
this.isKeyboardHide=true;
// console.log('HIDEK');
});
}
Step:7 Hide and show bottom div or footer accordingly.
//// FOR DIV BOTTOM DIV////
<div class="" *ngIf="isKeyboardHide">
</div>
//// OR FOR FOOTER ////
<ion-content></ion-content>
<ion-footer *ngIf="isKeyboardHide">
</ion-footer>
The best solution is use 'inVisible' property to hide footer or div.
for example:
<ion-footer *ngIf="!keyboard.isVisible">
I am footer!
</ion-footer>
Related
I have a simple autocomplete menu just like the one below.
Is there any way to monitor if the user clicks outside the menu? By default, if the user clicks outside the menu, it will close the menu. But I would like to trigger other actions besides just closing the menu.
I will keep it simple with the following scenario:
I have a boolean variable called myBoolVar that has a default value of false.
When the autocomplete is mounted, it will autofocus the input and the menu will only open when the user starts typing in the input. Untill here the myBoolVar remains false. but only when the user clicks outside of the menu, then the menu closes and the myBoolVar changes to true.
I have been through vuetify api documentation without any luck so far.
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
:search-input.sync="searchActor"
filled
autofocus
background-color=#313131
append-icon=""
prepend-inner-icon="mdi-arrow-left"
color="var(--textLightGrey)"
>
</v-autocomplete>
You can use blur event for autocomplete like that:
methods: {
someMethod() {
alert('tadam')
}
}
<v-autocomplete
v-model="value"
:items="items"
#blur="someMethod"
/>
You can find the documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events
You can use the v-click-outside directive calls a function when something outside of the target element is clicked on.
for more info see the vuetify: v-click-outside docs.
You can use something like this
<v-autocomplete
v-click-outside="onClickOutside"
....
and on click outside you can call method
methods: {
onClickOutside () {
....
},
},
Is there a way to close the mobile hamburger menu when you click on a menu link? We have a menu link that launches a modal window, but the menu is still showing behind it when I close the modal.
The state of the hamburger menu is kept in HamburgerMenuService. You can inject this service in your modal for example you can call the toggle(false) method in this component's onInit hook.
This way when the modal initializes the menu will close.
Thanks for the pointers. This is how I achieved the task:
Inject the HamburgerMenuService into the component:
import { HamburgerMenuService } from ‘#spartacus/storefront’;
Add my constructor:
constructor(private hamburger: HamburgerMenuService) {}
Access the toggle method in my modal function:
this.hamburger.toggle(true); // force close
I work with ion-searchbar on Ionic 4.
I would like to know how I can clear the content, if the user clicks on any other button (not the cancel button).
<ion-searchbar id="name_of_searchbar" animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>
In the function (any another button), I try with: document.getElementById ("name_of_searchbar"). innerHTML = "";
but although it modifies the content, it also removes the ion-searchBar
Thank you!
Add in search bar [(ngModel)]="searchValue"
<ion-searchbar [(ngModel)]="searchValue" animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>
And in ts file:
export class PageName {
searchValue:string;
constructor(){}
clearSearch(){
this.searchValue = "";
}
}
In the button you want the user to clear text with , put inside the button click example :
<ion-button color="primary" (click)="clearSearch()">empty search</ion-button>
I'm using AdminLTE theme (Bootstrap). I have some custom elements on the sidebar. I want to hide them when the sidebar is collapsed. Is there some specific class to do that?
You can use the collapse event like this:
$(document).on('expanded.pushMenu', function () {
$('.your-special-element').show();
}).on('collapsed.pushMenu', function(){
$('.your-special-element').hide();
});
Instead of show and hide it looks nicer if you use fadeOut and fadeIn
I'm working on an Adobe Air application. It's base on html and js. So there are img, input and textarea tags, which will show a native menu when right-click. For example, right click on the img tag, It shows a native menu with save image menu-item.
I've tried using normal javascript methods, like event.preventDefault(), and It doesn't work at all.
So how to prevent those native menus?
I found it very easy to solve this problem after 7 months. It's something about contextmenu.
Example:
Here is an <img> now.
<img src="https://www.google.com/images/srpr/logo4w.png">
Add a contextmenu event listener for it, and prevent its default bebaviour.
<img id="a" src="https://www.google.com/images/srpr/logo4w.png" >
<script>
$('#a').on('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
});
</script>
Then the default menu disappears.
Demo jsfiddle.net