diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index dc58a58f7a..441f79dca5 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -78,7 +78,7 @@ ion-searchbar {
   margin-right: -100%;
 }
 
-.searchbar-input-container.left-align {
+ion-searchbar.left-align {
   .searchbar-search-icon {
     margin-left: 0;
   }
@@ -108,7 +108,7 @@ ion-searchbar {
     }
   }
 
-  .searchbar-cancel.left-align {
+  .left-align .searchbar-cancel {
     right: 0px;
   }
 
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index ebc2a2c7dc..820374e910 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -25,13 +25,16 @@ import {ConfigComponent} from '../../config/decorators';
       console.log('Default Cancel');
     }
   },
+  host: {
+   '[class.left-align]': 'shouldLeftAlign',
+  }
   template:
-    '<div class="searchbar-input-container" [class.left-align]="shouldLeftAlign">' +
+    '<div class="searchbar-input-container">' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
       '<button clear *ng-if="query" class="searchbar-close-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
-    '<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="searchbar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
+    '<button *ng-if="showCancel" (click)="cancelAction($event, query)" class="searchbar-cancel">{{cancelText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass]
 })