IOS版本11及更高版本的Ionic 1应用程序中的内容重叠 [英] Content overlaps in Ionic 1 app for IOS version 11 and above

问题描述

我有一个使用 Cordova，Ionic V1和AngularJS V1 构建的应用程序，并且在显示日期的特定控件中，内容与以前的值重叠.仅在 IOS 11.4.1 (最新版本)中观察到此问题.在早期版本的IOS中，控件运行正常.

我已附上屏幕截图

在检查XCode后，我发现这是由 display:block 属性引起的.因此，我尝试更改display的值，其中大多数值都表示IOS不支持该显示，并且有效的方法是 display:-webkit-box-.但是，当我添加所有内容时，这些内容都移到了最左侧，即我在图像中突出显示的月份，日期和年份值.

下面是代码

  this.selectDate = function(date){如果(this.isDisabled(date))返回;this.selectedDate = angular.copy(date);this.selectedDate.setHours(0，0，0，0);this.tempDate = angular.copy(this.selectedDate);}; 

模板代码

 < div class = row>< div class ="col datepicker-day-of-month"ng-click ="datepickerCtrl.changeType(\'date \')">{{datepickerCtrl.selectedDate |日期:\'d \'}}</div></div> 

以上代码是ionic-datepicker 链接的一部分..>

日期内容在Android上正常运行，仅在IOS V 11.4.1中发布.

谢谢:)

解决方案

该问题与不支持IOS 11.4.1的显示属性值有关.

  display:块; 

上述属性在最新版本的IOS中不起作用.

所以我更改了显示属性的值

 显示:-webkit-inline-box！important;文本对齐:-webkit-center！important; 

text-align用于将div元素对齐在中心.

此解决方案适用于Android和IOS.

希望这对其他人有帮助.

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

解决方案

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.

这篇关于IOS版本11及更高版本的Ionic 1应用程序中的内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！