Status bar overlaps Capacitor v2 - javascript

I have a problem with the overlapping status bar. I want to have some margin or a safe area, that has other applications. I use Capacitor v2 because in the project I have Angular v7. I would like to cut off the status bar from the application window. This problem is only for iOS devices.
I would like to cut off the status bar from the application window.

Try to change the capacitor.config.json:
{
"ios": {
// Configure the WebView's UIScrollView's content inset behavior
// Default is never
// Possible values are "automatic", "scrollableAxes", "never" and "always"
// https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior
"contentInset": "always",
},
}

Related

Disable fullpage js on mobile devices

I tried to disable the fullpage js for mobile devices but it is not working.
The script i am using is :
<script>
var isPhoneDevice = "ontouchstart" in document.documentElement;
$(document).ready(function() {
if(isPhoneDevice){
//mobile
}
else{
$(document).ready(function(){
$('#fullpage').fullpage();
responsive: 700 // here is solution
})
}
});
</script>
website link : http://demo.lamppostmedia.in/arklan-dev/
Help me disable it.
There's no such thing as a "mobile device" anymore. Is a table a mobile device? Is a touch screen laptop consider a desktop?
The right way to deal with this is basing the behaviour on the resolution of the device the visitor is accessing from.
That's why fullPage.js version 3 provides the options responsiveWidth and responsiveHeight that allow you to turn off the snap effect when reaching certain threshold.
See the Responsive width example for fullPage.js.
And the examples code here:
https://github.com/alvarotrigo/fullPage.js/tree/master/examples
You can read more about responsive options in the the fullpage.js documentation:
responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

Ionic: Keyboard overlaps a focused text input on iOS 11

Issue
When I click the text input from the modal, a keyboard overlaps the text input. This issue has found during testing on iPhone SE (iOS 11) device.
I've looked up a several threads and tried to figure out on my own, but I've realized that my current problem has been a chronic issue for Ionic developers until now.
These are the related links to my issue. I've tried given solutions from links below, but none of them worked with my code.
Keyboard issue
Keyboard overlaps the text input when the input is placed inside an ion-footer
Keyboard hides input until I start typing
Ionic 2 On-Screen Keyboard Covers Focused Input Element Inside Grid Component
Version Info
cli packages: (/usr/local/lib/node_modules)
#ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.4
Cordova Platforms : android 6.3.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
Node : v8.9.0
npm : 5.5.1
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Expected behavior
Ion input should stay in a position right above the keyboard while a user types some messages.
Actual behavior
app.component.ts
I've included keyboard.disableScroll(true); inside platform.ready() to prevent navbar crashing issue. Without this line of code, the keyboard works fine with the input text. But it pushes the whole content to the top including navbar, thus for the first few messages appear to be hidden.
Any ideas?
UPDATED
I'm not sure the way I've solved the issue is the best solution, but for now, I replaced the content and footer's margin-bottom with a sum of an initial height of text area and the keyboard height.
If you have a better solution, feel free to leave it as an answer.
Here's the final result.
I was having similar problems in a similar project setup where the keyboard in iOS overlapped the footer bar in ionic. I was able to solve it by removing the ionic-plugin-keyboard#2.2.1 and adding cordova-plugin-ionic-keyboard#2.0.5 https://github.com/ionic-team/cordova-plugin-ionic-keyboard
Apparently I didn't notice that ionic-plugin-keyboard was deprecated as I was upgrading my project from Ionic 1 to 2, I'm guessing you may have been in a similar position.
To make things happen, first, you need to get the height of three elements like the example code below. For example,
#ViewChild(Content) content: Content;
ionViewDidLoad() {
if (this.platform.is('ios'))
this.addKeyboardListeners();
this.scrollContentElement = this.content.getScrollElement();
this.footerElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('ion-footer')[0];
this.inputElement = document.getElementsByTagName('your page component')[0].getElementsByTagName('textarea')[0];
}
Then, add a keyboard listener for ios platform.
addKeyboardListeners() {
this.keyboardHideSub = this.keyboard.onKeyboardHide().subscribe(() => {
let marginBottom = this.textareaHeight - this.initialTextAreaHeight + 44;
this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom + 'px');
this.renderer.setElementStyle(this.footerElement, 'marginBottom', '0px')
});
this.keybaordShowSub = this.keyboard.onKeyboardShow().subscribe((e) => {
let newHeight = (e['keyboardHeight']) + this.textareaHeight - this.initialTextAreaHeight;
let marginBottom = newHeight + 44 + 'px';
this.renderer.setElementStyle(this.scrollContentElement, 'marginBottom', marginBottom);
this.renderer.setElementStyle(this.footerElement, 'marginBottom', e['keyboardHeight'] + 'px');
this.updateScroll(250);
});
}
Lastly, it is important to unsubscribe the keyboard listeners whenever you leave the page.
Make it as a method and call it from wherever you need to.
removeKeyboardListeners() {
this.keyboardHideSub.unsubscribe();
this.keybaordShowSub.unsubscribe();
}
The solution of #coderroggie saved my life!
Just uninstall ionic-plugin-keyboard and then install cordova-plugin-ionic-keyboard and it will work.
In my case I had two windows:
- Chat List with ion-footer with input: when the input has focus the keyboard pushed all content up (including navbar).
Search with top searchbar and autocomplete List: when searchbar has focus the keyboard overlap the list.
Thank you #coderroggie.
It looks that this is framework related issue. I was also facing the same in android. To fix this i have used keyboard plugin and it's functions to handle height of viewport. Below is the code-
constructor(
private platform: Platform,
private keyboard: Keyboard
) {
if(this.platform.is('android')){
this.keyboard.onKeyboardShow().subscribe((e) => {
var keyboardHeight = e.keyboardHeight;
if ($("html").hasClass("plt-android")) {
keyboardHeight = keyboardHeight ? keyboardHeight : '337';
****337 is default height to handle if keyboard height not available****
$('body').css('height', 'calc(100vh - ' + keyboardHeight + 'px)' );
}
});
this.keyboard.onKeyboardHide().subscribe(e => {
$('input, textarea').blur();
if ($("html").hasClass("plt-android")) {
$("body").css("height", "100vh");
}
});
}
}
library--
npm install jquery
npm install #types/jquery
ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install #ionic-native/keyboard
imports--
import { Platform } from '#ionic/angular';
import * as $ from "jquery";
import { Keyboard } from '#ionic-native/keyboard/ngx';
I've changed
<ion-input type="tel" pattern="tel" autocomplete="tel (ionChange)="writeValue($event.target.value)"></ion-input>
to
<input type="tel" (change)="writeValue($event.target.value)" autocomplete="tel">
And added some styles
input {
width: 100%;
background-color: transparent;
border: none;
font-size: 17px;
font-weight: 400;
}
input:focus {
outline: none;
}
Finally, we got the perfect solution.
window.scrollBy(0, 100); // Scroll 100px downwards
window.scrollBy(100, 0); // Scroll 100px to the right

Cordova camera resize on orientation change

When taking a photo via navigator.camera.getPicture and changing the device's orientation inside the photo interface, the webview's viewport doesn't resize upon returning. The blank space is not part of the HTML document, so internal resizing in the app doesn't help.
A plugin bug? Is there a way to force resizing on the cordova / webview layer?
That's the result of starting vertical, opening the photo interface, turning into horizontal and returning to the app:
Dirty fix after returning from the camera interface:
fixCordovaCameraBug: function() {
if (... == 'iOS') {
var actions = window.StatusBar.isVisible ? ['hide', 'show'] : ['show', 'hide'];
window.StatusBar[actions[0]]();
window.StatusBar[actions[1]]();
window.setTimeout(function() {
// framework specific
Ext.GlobalEvents.fireResize();
}, 1);
}
},
This was just fixed with cordova-plugin-statusbar#2.2.0

Bug with flip animation using Titanium Alloy

I'm using Titanium Alloy to build an iOS app. I've run into a particularly frustrating issue that I've been stuck on for quite a bit now.
Once the user logs in, my goal is to have the login window animate (flip) to the dashboard window. This works well, except for this one bug. The Login navigation top bar seems to show for a second before the Player dashboard bar jumps downward to the right spot.
It looks like this until the flip animation is completed:
Upon completion of the animation it jumps to this:
The dashboard page is a TabGroup, akin to this, and the initial tab has the title "Player":
<TabGroup>
<Tab icon="player_icon.png">
<Window id="playerTab" title="Player"/>
</Tab>
</TabGroup>
The login controller is a NavigationWindow with a Login window and a Registration window.
On the successful submission of the login form, I create the index controller (the dashboard):
Alloy.createController('index', { animate: true, loginSuccess: true });
Which has the initialization code shown here:
if (!AppData.isLoggedIn() && !args['loginSuccess']) {
// Splash contains the register/login forms
Alloy.createController('splash');
} else {
// Check if the user is logging in or resuming previous state
if(args['animate']) {
$.index.open({ transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT });
} else {
$.index.open();
}
}
Does anyone have any idea why this bug might be occurring? I appreciate any help!
Thanks!
Figured it out! Turns out the flip animation wasn't accounting for the status bar height until the animation was finished, so I set an initial top margin of 20 for the TabGroup and removed the margin after the animation completed.
Works great now!

Orientation Portrait and PortraitUpSideDown Only For One Window

I have 10 windows.
The initial window is loginWindow i want to set orientation for Portrait and PortraitUpSideDown.
For remaining windows will have landscape and portrait orientation.
in Tiapp.xml
<key>UISupportedInterfaceOrientations~iphone</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
Which set all orientation for my application which enables portrait,portraitupsidedown,landscapeLeft and landscapeRight.
I need those only portrait and portraitUpSideDown for LoginWindow.
Rest of window do have all the orientation which is portrait,portraitupsidedown,landscapeLeft and landscapeRight.
Can any one suggest me how can i able to get this behaviours for my application.
You need to use different windows and define for each window which orientation you want to allow.
I mean, you have to create loginWindow like this:
var loginWindow = Ti.UI.createWindow({
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT],
fullscreen : false,
navBarHidden : true
});
winPortrait.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT];
Windows where you want to allow all orientations, have to been created like this:
var appWindow = Titanium.UI.createWindow({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
fullscreen : false,
navBarHidden : true,
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
});
appWindow.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT];
Hope it helps
Present your loginWindow as a modal view and after that set this methods for desired orientations.
- (BOOL) shouldAutorotate
{
return NO;
}
- (NSUInteger) supportedInterfaceOrientations
{
return UIInterfaceOrientationMaskPortrait;
}
Using different orientation modes for a single app in iOS is not recommended. Please read Orientation design principles
Apple's Developer documentation says: "People expect to use your
app in different orientations, and it’s best when you can fulfill that
expectation." In other words, don't look at handling orientation as a
bother but an opportunity.
Apple further recommends that when choosing to lock or support
orientation, you should consider following these principles:
On iPhone/iPod Touch – Don't mix orientation of windows within a single app; so, either lock orientation for the whole app, or react to orientation changes.
On iPhone – don't support the portrait-upside-down orientation because that could leave the user with their phone upside-down when receiving a phone call.
However you can achieve orientation for particualr window using the orientationMode property of window

Categories

Resources