diff --git a/snippets/action-search/search-action.js b/snippets/action-search/search-action.js
index <HASH>..<HASH> 100644
--- a/snippets/action-search/search-action.js
+++ b/snippets/action-search/search-action.js
@@ -5,10 +5,12 @@ var page = tabris.create("Page", {
 
 var proposals = ["baseball", "batman", "battleship", "bangkok", "bangladesh", "banana"];
 
-var textView = tabris.create("TextView", {
+var searchBox = tabris.create("Composite", {
   layoutData: {centerX: 0, centerY: 0}
 }).appendTo(page);
 
+var textView = tabris.create("TextView").appendTo(searchBox);
+
 var action = tabris.create("SearchAction", {
   title: "Search",
   image: "images/search.png"
@@ -24,10 +26,11 @@ updateProposals("");
 
 tabris.create("Button", {
   text: "Open Search",
-  layoutData: {centerX: 0, centerY: 0}
+  centerX: 0,
+  top: "prev() 10"
 }).on("select", function() {
   action.open();
-}).appendTo(page);
+}).appendTo(searchBox);
 
 page.open();
Fix search action snippet layout

"Selected '...'" text was behind the button as both were centered
horizontally and vertically on the screen. Wrap them in a centered
container instead.

Change-Id: I<I>ee<I>f5b7ba<I>cdb3cbf<I>c8fd1a<I>ef<I>