Content overlaps in Ionic 1 app for IOS version 11 and above

Question

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 :)

Answer 1

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.

Answer 2

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.