Trying to fix padding...

apps/app/package.json

@@ -1,4 +1,4 @@
 {
 	"name": "tns-samples-apps",
-	"main": "cuteness.io/app.js"
+	"main": "ui-tests-app/app.js"
 }

apps/app/ui-tests-app/css/main-page.ts

@@ -38,7 +38,8 @@ export function pageLoaded(args: EventData) {
     examples.set("all-non-uniform-border", "css/all-non-uniform-border");
     examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
     examples.set("list-picker", "css/list-picker");
-    //examples.set("border-playground", "css/border-playground");
+    examples.set("padding-and-border", "css/padding-and-border");
+    examples.set("border-playground", "css/border-playground");
 
     let viewModel = new SubMainPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

apps/app/ui-tests-app/css/padding-and-border.css

@@ -0,0 +1,19 @@
+#padding {
+    padding: 10;
+}
+
+#border {
+    border-width: 10;
+    border-color: black;
+}
+
+#background-color {
+    background-color: yellow;
+}
+
+/*#background-image {
+    background-image: url('~/ui-tests-app/pages/test2.png'); 
+    background-repeat: no-repeat; 
+    background-position: center center; 
+    background-size: 100% 100%;
+}*/

apps/app/ui-tests-app/css/padding-and-border.ts

@@ -0,0 +1,27 @@
+import { EventData, View, TextBase } from "ui/text-base";
+import { LayoutBase } from "ui/layouts/layout-base";
+
+let cssClassNames = [
+    "", 
+    "padding", 
+    "border", 
+    "background-color",
+    "padding border",
+    "padding background-color",
+    "border background-color",
+    "padding border background-color"
+];
+
+let currentIndex = 0;
+
+export function onChangeCSS(args: EventData){
+    let page = (<View>args.object).page;
+    let container = <LayoutBase>page.getViewById<LayoutBase>("container");
+    currentIndex++;
+    let newClassName = cssClassNames[currentIndex % cssClassNames.length];
+    for(let i = 0, length = container.getChildrenCount(); i < length; i++){
+        let child = container.getChildAt(i);
+        child.className = newClassName;
+    }
+    (<TextBase>page.getViewById<TextBase>("info")).text = newClassName || "none";
+}

apps/app/ui-tests-app/css/padding-and-border.xml

@@ -0,0 +1,15 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" id="padding-and-border-page">
+    <StackLayout>
+        <Button id="changeButton" tap="onChangeCSS"/>
+        <TextView id="info" isEnabled="false" isUserInteractionEnabled="false"/>
+        <StackLayout id="container" style.backgroundColor="gray">
+            <Label id="label" text="Label"/>
+            <TextField id="textField" text="TextField"/>
+            <TextView id="textView" text="TextView"/>
+            <Button id="button" text="Button"/>
+            <StackLayout id="stack-layout">
+                <StackLayout id="child-of-stack-layout" width="50" height="50" style.backgroundColor="red"></StackLayout>
+            </StackLayout>
+        </StackLayout>
+    </StackLayout>
+</Page>