diff --git a/horizon/static/framework/widgets/magic-search/hz-magic-search-bar.directive.js b/horizon/static/framework/widgets/magic-search/hz-magic-search-bar.directive.js
index 90c982e86b..4e0e29df72 100644
--- a/horizon/static/framework/widgets/magic-search/hz-magic-search-bar.directive.js
+++ b/horizon/static/framework/widgets/magic-search/hz-magic-search-bar.directive.js
@@ -77,6 +77,7 @@
          */
         var templateUrl = basePath + 'magic-search/magic-search.html';
         element.find('magic-search').attr('template', templateUrl);
+        element.addClass('magic-search-bar');
       },
       restrict: 'E',
       scope: {
diff --git a/horizon/static/framework/widgets/magic-search/magic-search.scss b/horizon/static/framework/widgets/magic-search/magic-search.scss
index 9843ddd674..7ff90afd58 100644
--- a/horizon/static/framework/widgets/magic-search/magic-search.scss
+++ b/horizon/static/framework/widgets/magic-search/magic-search.scss
@@ -50,7 +50,7 @@
   padding-left: 10px;
 }
 
-hz-magic-search-bar {
+.hz-magic-search-bar {
   .magic-search-bar {
     width: 100%;