I am building an app for Android and iOS using Ionic.
I use bar-header for titles in my views:
<ion-view view-title="Home" class="tab-home">
<ion-content class="padding">
<div class="bar bar-header bar-positive">
<div class="h1 title">The European Experience</div>
</div>
<div class="bar bar-subheader bar-stable">
<h2 class="title">Companion App</h2>
</div>
<div class="content has-header padding">
...
</div>
</ion-content>
</ion-view>
When displayed in my browser with ionic serve -l, the header is correctly displayed:
When running on a real Android device, it works as well:
But when I run the app on an iOS device (either physical or on Simulator), the title is not vertically centered:
I tried adding CSS to explicitly specify vertical-align or text-align, but without success.
What could explain this issue? And how can I center the title inside this header?
This sort of problem is common depending on which Ios / Ionic versions you use ,
Did you try using the Tag ?
ion-header-bar
Related
I have an app written in Ionic v1, Cordova, and AngularJS 1.5.3.
The problem that I have does not occur on Android devices at all.
iPhones tested on: iPhone SE, iPhone 8, iPhone X, and iPhone XR.
For iOS 13.6 the problem occurs on: iPhone SE, iPhone 8, iPhone X, and iPhone XR.
iPhone X, and iPhone XR ( completely pushes the buttons out of view )
For iOS 12 the problem occurs on:
iPhone XR - somewhat occurs
iPhone 8 - does not occur
iPhone SE - does not occur
iPhone X - somewhat occurs
For iOS 11:
it does not occur on iPhone 8. There are no problems.
iPhone SE - no problems
It somewhat occurs on the iPhone X.
iPhone XR does not run iOS 11.
As the version of iOS increases, it seems to have more of an effect.
What my code is doing:
My page is for the user to enter an absence and they have the option of adding photo attachments.
The attachment is just going to be added as an ion-item in my ion-list.
I have an ionic view and a footer with a button in it. When I add an ionic item to my ionic list, it seems to push the footer button down out of the "safe area" and it does so permanently.
Even if I go to a different page and come back again the problem persists. It also seems to permanently affect the "safe area" on the different pages of my app.
Problem:
As the attachment list grows, it pushes the footer button down out of the safe area
How can I keep my button in my footer in place on the latest versions of iOS?
Code snippet:
<ion-view left-buttons="leftButtons" cache-view="false" right-buttons="rightButtons">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-home" ui-sref="main.home"
automation-id="RIGHT_NAV_HOME_BUTTON">
</button>
</ion-nav-buttons>
<ion-content class="has-header has-footer bg-stable" padding="false">
<ion-list can-swipe="true">
<div class="item title-bar">
<h2 class="dark" ng-i18next="BOOK_ABSENCE"></h2>
</div>
<div class="item item-icon-left" ng-click="setDate('startDate')">
<i class="icon ion-ios-calendar-outline"></i>
<span ng-i18next="START_DATE"></span>
<span class="item-note">{{ data.startDate | dateFormat }}</span>
</div>
<div class="item item-icon-left" ng-click="setDate('endDate')">
<i class="icon ion-ios-calendar"></i>
<span ng-i18next="END_DATE"></span>
<span class="item-note">{{ data.endDate | dateFormat }}</span>
<i class="icon ion-ios-arrow-right"></i>
</div>
<div class="item item-divider"></div>
<label class="item item-input">
<textarea placeholder="Comments" ng-model="data.comments" rows="4"></textarea>
</label>
<div class="item item-divider"></div>
<ion-item class="flex-container-center" ng-repeat="attachment in attachments">
<div class="flex-item-1">
<img ng-src="data:{{ attachment.mediaTypeField }};base64,{{ attachment.imageDataField }}">
</div>
<div class="flex-item-big">
<div>{{ attachment.filename }}</div>
</div>
</ion-item>
</ion-list>
</ion-content>
<div class="bar bar-footer no-padding bg-bottom">
<div class="button-bar">
<button class="button button-positive" ng-click="book()">
<span ng-i18next="SAVE"></span>
</button>
</div>
</div>
</ion-view>
Environment:
ionic info
Ionic:
ionic (Ionic CLI) : 4.10.3 (C:\Users\User\node_modules\ionic)
Ionic Framework : ionic1 1.3.5
#ionic/v1-toolkit : 1.0.22
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)
System:
Android SDK Tools : 26.1.1 (C:\Users\User\Documents\Android\sdk)
NodeJS : v10.21.0 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
In the past, the new iPhone X came out and I added some code to make adjustments for the "safe area".
css
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); //iOS 11.2
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
html
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
As I'm using cordova-ios 6.1.0 I'm using WkWebView only.
<platform name="ios">
<preference name="WKWebViewOnly" value="true" />
It turns out that the env() calculation is only reliable when the app first loads. When we open the camera widget, we are technically leaving the application and when we come back the env() is evaluated again and it's giving a value that we don't want.
To solve this problem I set the top padding to be zero.
body {
padding: 0 constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); //iOS 11.2
padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
We already have viewport cover in the HTML so we are good when it comes to the safe area.
I have a responsive page built upon bootstrap. For some reason, I cannot get the checkbox to display in an iOS built device. The checkboxes work in every browser imaginable, and even work in the developer module of chrome (emulating iOS devices) and even works in the iOS reader. It just will not display on an iPhone. Is it being hidden behind another element?
Thanks in advance!
http://www.johnstoncc.edu/FA/2/depnbrhhc.html
Changing the column sizes to the following fixes it.
<div>
<div class="col-xs-2 col-sm-2 col-lg-1" style="margin-top:20px;">
<input id="OBKey_Signed_1" type="checkbox" name="OBKey_Signed_1"
value="Y" required="" data-com.agilebits.onepassword.user-edited="yes"
style="-webkit-appearance: radio;">
</div>
<div class="col-xs-10 col-sm-10 col-lg-11">
By checking this box, I ratify the use of my typed name and
Student ID number as an electronic representation of my signature.
</div>
</div>
I am facing a strange behaviour of IONIC 1 IOS application in IOS 11.0.3 .
I had a list of Item and which I rendered on screen via using ng-repeat via using following code. i.e
<div class="list-container" ng-cloak>
<div ng-repeat="message in messageCtrl.messageList track by $index" ng-class="messageCtrl.checkClass
(message);" class="messages" ng-cloak>
<div class="message" ng-cloak>
<span ng-cloak>
<a href="javascript:void(0);" ng-click="goToSechduleScreen(message, 'present');" ng-cloak>
{{ message.message }}
<strong ng-cloak>{{ message.annotation }}</strong>
<span ng-cloak class="scheduleMessage" ng-if="messageCtrl.doesMessageIsScheduled(message
);"><i class="icon ion-clock"></i></span>
</a>
</span>
<div class="datetime" am-time-ago="message.date_created" ng-cloak></div>
</div>
</div>
</div>
The above code is working fine in all IOS device which is running on IOS 10 or lower. but in IOS 11.0.3 some "ng-repeat" item are not displayed .when I scroll up and down sometime Items are visible or some not.
Please check following screen-short for better clarity.
When some items are displayed and some items are not,
When all items are displayed sometime when I scroll up and down,
when just only single item displayed and rest of item are not displayed
Any kind of help or suggestion is appreciated.
Thanks in advance.
I am developing an application using worklight framework from IBM in which I use jquery mobile library to code.
Unfortunately, when I use $.mobile.silentScroll to scroll, it has no effect, it does not work.
Has anyone met that issue? In other work, How to scroll page in worklight?
I don't think you can do this with jQuery Mobile's silentScroll, as it basically uses window.scrollTo, and this allows to scroll only within the current viewport (what you currently see on the screen).
Instead I would recommend to use iScroll's various API methods: scrollTo, ScrollToElement or Snap, etc.
I tested the below in Android and it worked.
You'll of course need to adjust it to your application...
common\js\main.js:
var myScroll;
function wlCommonInit(){
myScroll = new IScroll('#wrapper');
}
common\index.html:
<body style="display: none;">
<div id="wrapper">
<div data-role="page" id="page">
<div data-role="content" id="content" style="padding: 15px">
<div id="firstDiv">
<input type="button" value="scroll to the other div" onclick="myScroll.scrollToElement('#secondDiv', '0s');"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="secondDiv">
hello
</div>
</div>
</div>
</div>
...
...
</body>
0s means there will be no scroll effect; it will essentially 'jump' to the desired location.
I'm trying to show a pop up which will close when touched and also keep the underlying page as it was left because it will have open accordions on it. This works in the browser but wont close on android. I'm using android 2.3, jquery mobile and phonegap.
My code is:
<div data-role="page">
<div>
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="true" data-history="true" data-overlay-theme="c" onclick="closePopup();" >
<p>This is a basic popup.<p>
</div>
</div>
</div>
and:
function closePopup(){
$('#popupBasic').popup('close');
}
Any help would be great.