Search code examples
ioscsscordovaionic-frameworkios11

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

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

enter image description here

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

Solution

  • 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.