diff --git a/template/app/controller/InlineExamples.js b/template/app/controller/InlineExamples.js
index c4a6baba91b93324dfa71622cabd5773067392d2..7268b6e3dd2db7c0a1ffe6fe821f6f079edafa2b 100644
--- a/template/app/controller/InlineExamples.js
+++ b/template/app/controller/InlineExamples.js
@@ -116,7 +116,9 @@ Ext.define('Docs.controller.InlineExamples', {
         example.codeEditor.setValue(code);
         var activeItem = example.layout.getActiveItem();
         if (activeItem.cmpName == 'preview') {
-            this.refreshPreview(example);
+            example.showPreview(function() {
+                this.refreshPreview(example);
+            }, this);
         }
         example.updateHeight();
     },
diff --git a/template/app/view/examples/Inline.js b/template/app/view/examples/Inline.js
index e2ff298a72bdf1eb2a11a4850e58666bc4a426f4..b681c181e57494c9f063c1cfaf3b528ac037ef59 100644
--- a/template/app/view/examples/Inline.js
+++ b/template/app/view/examples/Inline.js
@@ -59,8 +59,14 @@ Ext.define('Docs.view.examples.Inline', {
                 bodyPadding: 2,
                 bodyStyle: 'background: #f7f7f7',
                 autoScroll: true
+            },
+            {
+                bodyPadding: '0 10',
+                cmpName: 'preview',
+                html: this.getHtml()
             }
         ];
+        this.activeItem = Docs.touchExamplesUi ? 1 : 0;
 
         this.callParent(arguments);
     },
@@ -80,11 +86,6 @@ Ext.define('Docs.view.examples.Inline', {
      */
     showPreview: function(callback, scope) {
         if (!this.previewInitialized) {
-            this.add({
-                bodyPadding: '0 10',
-                cmpName: 'preview',
-                html: this.getHtml()
-            });
             var iframe = document.getElementById(this.getIframeId());
             // Something is not quite ready when onload fires.
             // I'm unsure what I should wait for. So I'm currently adding just this nasty delay.