In Ionic 3 application, I want to show the cancel button of ion-searchbar until the search bar has value.
Mine is a tab based application and on moving to other tab and coming back to the tab, the search text is been retained and I need the cancel button also to be visible if text exists in search bar. But it is not visible.
<ion-searchbar
#projectsearchbar name="query" (search)="doSearch($event)" [(ngModel)]="global.SearchFilter" [showCancelButton]="true" cancelButtonText="Cancel" placeholder="Search" (ionCancel)="onSearchCancel($event)" (ionInput)="onInput($event)" (ionBlur)="onInputBlur()" (ionFocus)="onInputFocus()" (ionClear)="onInputClear($event)" >
I tried to get the cancel element and set the style, but it didn't work
ionViewWillEnter() {
if (this.global.SearchFilter) {
let cancelBlurElement = <HTMLElement>document.querySelector(".searchbar-ios .searchbar-ios-cancel");
cancelBlurElement.style.display = 'block';
}
}
Also tried to get the search bar control by class name and added a custom class but it didn't worked.
ionViewWillEnter() {
if (this.global.projectSearchFilter) {
let el=document.getElementsByTagName('ion-searchbar');
el[0].classList.add('visible-cancel');
}
}
.visible-cancel {
display: block!important;
}
Also tried to import as view child,
import { Component, Output, NgZone, ViewChild } from '#angular/core';
export class SearchPage {
#ViewChild('projectsearchbar') searchbar:Searchbar;
ionViewWillEnter() {
this.searchbar.setFocus();
}
}
i had the same issue
resolved by using this CSS snippet in the encapsulating element
.encapsulating-element {
.searchbar-ios-cancel{
display: none !important;
}
}
Related
For a specific page, I'm trying to hide the statusbar and make the content fullscreen but it doesn't seem to work.
general setting in appcomponent.ts .
//for most pages
if (core.isPlatform(OsType.CORDOVA)) {
this.statusBar.styleLightContent();
this.statusBar.overlaysWebView(false);
this.statusBar.backgroundColorByHexString('#0076b2');
}
code in specific page:
some-page.ts
//for specific page
ionViewDidLoad() {
if (this.core.isPlatform(OsType.CORDOVA)) {
this.statusBar.hide();
this.statusBar.overlaysWebView(true);
}
}
ionViewWillLeave() {
if (this.core.isPlatform(OsType.CORDOVA)) {
this.statusBar.show();
this.statusBar.overlaysWebView(false);
}
}
my result is always with the blue Statusbar visible:
I'm having trouble finding documentation on this.
In Ionic, the menu has functionality where if you click on the backdrop, the menu dismisses. So basically click anywhere except the menu and the menu goes away. I want to disable this functionality so users can interact with items below the backdrop.
I've tried disabling pointer events on the backdrop and the menu, but the dismiss still seems to occur. Any thoughts?
Interesting discovery; the menu dismiss functionality actually looks like it might be on the ion-content. Which leads to an issue:
I want users to be able to interact with the content with ion-content without dismissing the menu.
For me, this helped:
ion-menu {
pointer-events: none;
}
ion-menu > * {
pointer-events: all;
}
Here is the sample code how you can do this in your ionic application.
import { Platform, MenuController } from 'ionic-angular';
// ... Other code
constructor(menuCtrl: MenuController /* ... other code ...*/)
// ... Other code
let menu = menuCtrl.get();
menu.swipeEnable(false); // Disable drag to open/close
// Override default behaviour of closing the menu on
// content or backdrop click
menu['onBackdropClick'] = () => {
// No-op
};
menu.ionOpen.subscribe(() => {
// When the menu is open ...
// Remove Ionic's CSS rules for menu-content-open class that restricts
// mouse events on ion-nav
menu.getContentElement().classList.remove("menu-content-open");
// Reduce the size of the content pane so that it does not
// overflow off the screen
menu.getContentElement().style.width =
`calc(100% - ${menu.getMenuElement().clientWidth}px)`;
});
menu.ionClose.subscribe(() => {
// When the menu is closed ...
// Restore the size of the content pane
menu.getContentElement().style.width = '';
});
I made a stackblitz project you can check it out. You can check it out from here.
I'm working on Ionic App, I want to hide navbar and tabs on scroll down and show them on scroll up.
Anyone know how to do this? Please help.
Thanks in advance.
a very naive implementation would be:
add a var that will be your boolean flag for state (shown/hidden)
add change detector ref into your component (as you will need to cdr
change of this boolean to propagate UI)
bind your header/footer via *ngIf directive
Something like this:
import { Component, ChangeDetectorRef } from '#angular/core';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage2 {
headerVisible: boolean = false;
constructor(
public cdr: ChangeDetectorRef
) {
}
scrollState(event) {
if (event.directionY == "up") {
this.headerVisible = false;
} else {
this.headerVisible = true;
}
this.cdr.detectChanges();
}
}
And in your template:
<ion-header *ngIf="headerVisible">
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
But most probably instead of *ngIf you would want to alter header's/footer's height so that your overall template dealt better with margins.
Also please note that ideally you don't want scroll event to "spam" so you need to implement proper way you capture the state (up or down) without it (debounce / throttle it)
I want to hide my tabs when the keyboard is open, and show the tabs again when the keyboard is closed.
I know that I can go just for "AdjustSpan", and thats it, but the problem is that if I do that, the keyboard also hides an input that I have for a chat, because its a footer.
Whats the best way to hide the tabs?
I already tried with [ngClass] in , I tried with Keyboard.disableScroll, and also in app.module.ts using the parameters scrollAssist and autoFocusAssist with false value...
Nothing seems to work.
Any idea of how should I hide the tabs??
Thank you in advance!!
You have to add an eventlistener for keyboard-interaction to add (or remove) some css class to the body-tag. In ionic1 the class "hide-on-keyboard-open" was added by default from the framework. In ionic2 you have to walk the "custom-implementation-path". So, here is what you are looking for:
1) Install keyboard-plugin and node_modules as described in ionic2 docs:
ionic plugin add ionic-plugin-keyboard
npm install --save #ionic-native/keyboard
https://ionicframework.com/docs/native/keyboard/
2) Add the plugin to your app.modules.ts
3) Add the desired eventlister withiin the device-ready event in your app.component.ts:
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.keyboard.onKeyboardShow().subscribe(() => {
document.body.classList.add('keyboard-is-open');
});
this.keyboard.onKeyboardHide().subscribe(() => {
document.body.classList.remove('keyboard-is-open');
});
})
4) Add the class defintion to your app.scss with a additional class-attribute (hideElementOnKeyboardShown)
body.keyboard-is-open .hideElementOnKeyboardShown{
display: none;
}
5) Add the class to the desired element, eg an footer, div or sth else:
<ion-footer class="hideElementOnKeyboardShown">
<button round ion-button (click)="onLogin()" block>
<ion-icon name="logo-facebook" padding></ion-icon>
Login
</button>
</ion-footer>
6) in this case, put the ion-footer tag within the content-tag, otherwise the calculated viewheight isnt correct when keyboard is shown.
have a nice day!
just add the following lines to your config.xml..
<platform name="android">
<preference name="android-
manifest/application/activity/#android:windowSoftInputMode"
value="adjustPan" />
....
</platform>
What this does is modify the default value that Cordova writes to your AndroidManifest.xml to control the global keyboard input behaviour for your app.
You can achieve that by writing a directive that subscribes to the Keyboard events and then adds(hide)/removes(show) a css property/class (display: none) to the tabs element once the keyboard is shown/hidden.
#Directive({
selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
private static CSS_CLASS_NAME = 'hide-tab-bar';
private show: Subscription;
private hide: Subscription;
constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {
platform.ready().then(() => {
this.show = keyboard.onKeyboardShow().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
);
this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
);
});
}
ngOnDestroy(): void {
if (this.hide !== undefined) {
this.hide.unsubscribe();
}
if (this.show !== undefined) {
this.show.unsubscribe();
}
}
}
add css class in app.scss (for example):
.hide-tabs {
display: none;
}
on your tabs element <ion-tabs hideTabs> </ion-tabs>
**code added for proof of concept
I need to hide dockbar for non logged in guests. I did that by creating custom theme that uses welcome-theme as a parent, and the following snippet:
#if($is_signed_in)
#dockbar()
#end
in theme's templates\portal_normal.vm.
This presents another problem - when page reorders to fit a mobile screen, menu collapses to a button in the dockbar which is hidden. I would love to have it collapse somewhere else, just that it isn't hidden - for example next to the small logo / site title, or as a first breadcrumbs item.
How to do it, or where to begin. I appreciate any help.
Menu collapses by default for phone and tablet viewports. You can create your own button to open/close collapsed menu in phone/tablet viewport. Check following simplified example:
Theme velocity template:
#if(!$is_signed_in)
<div id="mainNavigationToggle" class="btn btn-secondary">
<i class="icon-reorder"></i>
</div>
#end
Theme main.js:
AUI().ready(function (A) {
var navigationToggleBtn = A.one('#mainNavigationToggle'); // get our toggle button
var navigationUl = A.one(Liferay.Data.NAV_SELECTOR); // get default navigation ul element
if (navigationToggleBtn && navigationUl) { // do nothing when toggle button not present (user not signed in) or if navigation is not present
navigationToggleBtn.on( // otherwise assign simple function that'll toggle 'open' menu class on default navigation which will cause it to open, same for menu toggle button
'click',
function (event) {
navigationToggleBtn.toggleClass('open');
navigationUl.toggleClass('open');
}
);
}
}
);
Theme custom.css:
#mainNavigationToggle {
display: none; /* hide by default */
#include respond-to(phone, tablet) {
display: block; /* show only for phone and tablet viewports */
}
}