I have a app built using Cordova, Ionic V1 and AngularJS V1 and in a particular control that is displaying date , content overlaps to the previous value. This issue is observed only in IOS 11.4.1 (latest release). In the previous version IOS the control was working properly.
I have attached the screen shot
After inspecting in XCode I found out that this is a issue which is caused by display: block property. So I tried changing the value of display, most of the values says unsupported in IOS and which works is display: -webkit-box- . But when I add that all the contents move to extreme left side that is Month, Date and Year values which I have highlighted in the image.
And below is the code
this.selectDate = function (date) {
if (this.isDisabled(date)) return;
this.selectedDate = angular.copy(date);
this.selectedDate.setHours(0, 0, 0, 0);
this.tempDate = angular.copy(this.selectedDate);
};
Template code
<div class=row>
<div class="col datepicker-day-of-month"
ng-click="datepickerCtrl.changeType(\'date\')">
{{datepickerCtrl.selectedDate | date: \'d\'}}
</div>
</div>
The above code is part of ionic-datepicker link .
The date content works properly on Android has issue only in IOS V 11.4.1.
Thanks :)
I have not tested it but I faced something similar issue. Please try to replace <div>
with <span>
and see if it works:
<div class=row>
<span class="col datepicker-day-of-month"
ng-click="datepickerCtrl.changeType(\'date\')">
{{datepickerCtrl.selectedDate | date: \'d\'}}
</span>
</div>
Also instead of display: block
use display: inline
.
Hope it will help you.
The issue is related to the display property value which does not support for IOS 11.4.1.
display: block;
The above property does not work in the latest version of IOS.
So I changed the value of the display property
display: -webkit-inline-box !important;
text-align: -webkit-center !important;
text-align is used to align the div elements at the center.
This solution works for both Android and IOS.
Hope this helps others.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.