Padding for various iOS controls was not reflected the px/dip change

tns-core-modules/ui/button/button.ios.ts

@@ -2,7 +2,7 @@
 import {
     ButtonBase, PseudoClassHandler, whiteSpaceProperty,
     borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, textAlignmentProperty,
-    paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, Length, WhiteSpace, TextAlignment
+    paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, Length, WhiteSpace, TextAlignment, layout
 } from "./button-common";
 
 export * from "./button-common";
@@ -73,7 +73,7 @@ export class Button extends ButtonBase {
     }
     set [borderTopWidthProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let top = this.effectivePaddingTop + this.effectiveBorderTopWidth;
+        let top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
         this.nativeView.contentEdgeInsets = { top: top, left: inset.left, bottom: inset.bottom, right: inset.right };
     }
 
@@ -85,7 +85,7 @@ export class Button extends ButtonBase {
     }
     set [borderRightWidthProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let right = this.effectivePaddingRight + this.effectiveBorderRightWidth;
+        let right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
         this.nativeView.contentEdgeInsets = { top: inset.top, left: inset.left, bottom: inset.bottom, right: right };
     }
 
@@ -97,7 +97,7 @@ export class Button extends ButtonBase {
     }
     set [borderBottomWidthProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let bottom = this.effectivePaddingBottom + this.effectiveBorderBottomWidth;
+        let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
         this.nativeView.contentEdgeInsets = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
     }
 
@@ -109,7 +109,7 @@ export class Button extends ButtonBase {
     }
     set [borderLeftWidthProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let left = this.effectivePaddingLeft + this.effectiveBorderLeftWidth;
+        let left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
         this.nativeView.contentEdgeInsets = { top: inset.top, left: left, bottom: inset.bottom, right: inset.right };
     }
 
@@ -121,7 +121,7 @@ export class Button extends ButtonBase {
     }
     set [paddingTopProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let top = this.effectivePaddingTop + this.effectiveBorderTopWidth;
+        let top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
         this.nativeView.contentEdgeInsets = { top: top, left: inset.left, bottom: inset.bottom, right: inset.right };
     }
 
@@ -133,7 +133,7 @@ export class Button extends ButtonBase {
     }
     set [paddingRightProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let right = this.effectivePaddingRight + this.effectiveBorderRightWidth;
+        let right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
         this.nativeView.contentEdgeInsets = { top: inset.top, left: inset.left, bottom: inset.bottom, right: right };
     }
 
@@ -145,7 +145,7 @@ export class Button extends ButtonBase {
     }
     set [paddingBottomProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let bottom = this.effectivePaddingBottom + this.effectiveBorderBottomWidth;
+        let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
         this.nativeView.contentEdgeInsets = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
     }
 
@@ -157,7 +157,7 @@ export class Button extends ButtonBase {
     }
     set [paddingLeftProperty.native](value: Length) {
         let inset = this.nativeView.contentEdgeInsets;
-        let left = this.effectivePaddingLeft + this.effectiveBorderLeftWidth;
+        let left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
         this.nativeView.contentEdgeInsets = { top: inset.top, left: left, bottom: inset.bottom, right: inset.right };
     }
 

tns-core-modules/ui/label/label.ios.ts

@@ -196,7 +196,7 @@ export class Label extends TextBase implements LabelDefinition {
         let nativeView = this.nativeView;
         let padding = nativeView.padding;
         nativeView.padding = {
-            top: this.effectivePaddingTop,
+            top: layout.toDeviceIndependentPixels(this.effectivePaddingTop),
             right: padding.right,
             bottom: padding.bottom,
             left: padding.left
@@ -211,7 +211,7 @@ export class Label extends TextBase implements LabelDefinition {
         let padding = nativeView.padding;
         nativeView.padding = {
             top: padding.top,
-            right: this.effectivePaddingRight,
+            right: layout.toDeviceIndependentPixels(this.effectivePaddingRight),
             bottom: padding.bottom,
             left: padding.left
         };
@@ -226,7 +226,7 @@ export class Label extends TextBase implements LabelDefinition {
         nativeView.padding = {
             top: padding.top,
             right: padding.right,
-            bottom: this.effectivePaddingBottom,
+            bottom: layout.toDeviceIndependentPixels(this.effectivePaddingBottom),
             left: padding.left
         };
     }
@@ -241,7 +241,7 @@ export class Label extends TextBase implements LabelDefinition {
             top: padding.top,
             right: padding.right,
             bottom: padding.bottom,
-            left: this.effectivePaddingLeft
+            left: layout.toDeviceIndependentPixels(this.effectivePaddingLeft)
         };
     }
 }

tns-core-modules/ui/text-field/text-field.ios.ts

@@ -1,6 +1,6 @@
 import { 
     TextFieldBase, secureProperty, textProperty, hintProperty, colorProperty, placeholderColorProperty, 
-    Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, _updateCharactersInRangeReplacementString, Color
+    Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, _updateCharactersInRangeReplacementString, Color, layout
 } from "./text-field-common";
 
 export * from "./text-field-common";
@@ -107,10 +107,13 @@ class UITextFieldImpl extends UITextField {
         }
 
         const size = bounds.size;
-        return CGRectMake(owner.effectiveBorderLeftWidth + owner.effectivePaddingLeft, owner.effectiveBorderTopWidth + owner.effectivePaddingTop,
+
-            size.width - (owner.effectiveBorderLeftWidth + owner.effectivePaddingLeft + owner.effectivePaddingRight + owner.effectiveBorderRightWidth),
+        const x = layout.toDeviceIndependentPixels(owner.effectiveBorderLeftWidth + owner.effectivePaddingLeft);
-            size.height - (owner.effectiveBorderTopWidth + owner.effectivePaddingTop + owner.effectivePaddingBottom + owner.effectiveBorderBottomWidth)
+        const y = layout.toDeviceIndependentPixels(owner.effectiveBorderTopWidth + owner.effectivePaddingTop);
-        );
+        const width = layout.toDeviceIndependentPixels(layout.toDevicePixels(size.width) - (owner.effectiveBorderLeftWidth + owner.effectivePaddingLeft + owner.effectivePaddingRight + owner.effectiveBorderRightWidth));
+        const height = layout.toDeviceIndependentPixels(layout.toDevicePixels(size.height) - (owner.effectiveBorderTopWidth + owner.effectivePaddingTop + owner.effectivePaddingBottom + owner.effectiveBorderBottomWidth));
+
+        return CGRectMake(x, y, width, height);
     }
 
     public textRectForBounds(bounds: CGRect): CGRect {

tns-core-modules/ui/text-view/text-view.ios.ts

@@ -3,7 +3,7 @@ import {
     EditableTextBase, editableProperty, hintProperty, textProperty, colorProperty,
     borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
     paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, 
-    Length, _updateCharactersInRangeReplacementString, Color
+    Length, _updateCharactersInRangeReplacementString, Color, layout
 } from "ui/editable-text-base";
 
 import { ios } from "utils/utils";
@@ -171,7 +171,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [borderTopWidthProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let top = this.effectivePaddingTop + this.effectiveBorderTopWidth;
+        let top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
         this.nativeView.textContainerInset = { top: top, left: inset.left, bottom: inset.bottom, right: inset.right };
     }
 
@@ -183,7 +183,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [borderRightWidthProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let right = this.effectivePaddingRight + this.effectiveBorderRightWidth;
+        let right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
         this.nativeView.textContainerInset = { top: inset.top, left: inset.left, bottom: inset.bottom, right: right };
     }
 
@@ -195,7 +195,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [borderBottomWidthProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let bottom = this.effectivePaddingBottom + this.effectiveBorderBottomWidth;
+        let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
         this.nativeView.textContainerInset = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
     }
 
@@ -207,7 +207,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [borderLeftWidthProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let left = this.effectivePaddingLeft + this.effectiveBorderLeftWidth;
+        let left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
         this.nativeView.textContainerInset = { top: inset.top, left: left, bottom: inset.bottom, right: inset.right };
     }
 
@@ -219,7 +219,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [paddingTopProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let top = this.effectivePaddingTop + this.effectiveBorderTopWidth;
+        let top = layout.toDeviceIndependentPixels(this.effectivePaddingTop + this.effectiveBorderTopWidth);
         this.nativeView.textContainerInset = { top: top, left: inset.left, bottom: inset.bottom, right: inset.right };
     }
 
@@ -231,7 +231,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [paddingRightProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let right = this.effectivePaddingRight + this.effectiveBorderRightWidth;
+        let right = layout.toDeviceIndependentPixels(this.effectivePaddingRight + this.effectiveBorderRightWidth);
         this.nativeView.textContainerInset = { top: inset.top, left: inset.left, bottom: inset.bottom, right: right };
     }
 
@@ -243,7 +243,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [paddingBottomProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let bottom = this.effectivePaddingBottom + this.effectiveBorderBottomWidth;
+        let bottom = layout.toDeviceIndependentPixels(this.effectivePaddingBottom + this.effectiveBorderBottomWidth);
         this.nativeView.textContainerInset = { top: inset.top, left: inset.left, bottom: bottom, right: inset.right };
     }
     
@@ -255,7 +255,7 @@ export class TextView extends EditableTextBase implements TextViewDefinition {
     }
     set [paddingLeftProperty.native](value: Length) {
         let inset = this.nativeView.textContainerInset;
-        let left = this.effectivePaddingLeft + this.effectiveBorderLeftWidth;
+        let left = layout.toDeviceIndependentPixels(this.effectivePaddingLeft + this.effectiveBorderLeftWidth);
         this.nativeView.textContainerInset = { top: inset.top, left: left, bottom: inset.bottom, right: inset.right };
     }
 }