fix: action bar fix for the responsiveness of menu list (#1150)

* bug:fix for the responsiveness of menu list in the action bar * bug:fix for the responsiveness of menu list in the action bar
SAP · Aug 23, 2019 · 92ad44d · 92ad44d
1 parent 09f495e
commit 92ad44d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 20 deletions.
diff --git a/...tion/component-docs/action-bar/examples/action-bar-contextual-menu-example.component.html b/...tion/component-docs/action-bar/examples/action-bar-contextual-menu-example.component.html
@@ -3,18 +3,15 @@
         <h3 fd-action-bar-title>Page Title</h3>
     </div>
     <div fd-action-bar-actions>
-        <fd-popover>
+        <fd-popover placement="bottom-end">
             <fd-popover-control>
-                <button fd-button
-                        aria-label="More"
-                        aria-haspopup="true"
-                        [fdType]="'light'"
-                        [glyph]="'overflow'"></button>
+                <button fd-button aria-label="More" aria-haspopup="true" [fdType]="'light'"
+                    [glyph]="'overflow'"></button>
             </fd-popover-control>
             <fd-popover-body>
                 <fd-menu>
                     <ul fd-menu-list>
-                        <li fd-menu-item>
+                        <li fd-menu-item class="is-disabled">
                             Edit
                         </li>
                         <li fd-menu-item>
@@ -34,4 +31,4 @@ <h3 fd-action-bar-title>Page Title</h3>
             </fd-popover-body>
         </fd-popover>
     </div>
-</div>
+</div>
diff --git a/...documentation/component-docs/action-bar/examples/action-bar-mobile-example.component.html b/...documentation/component-docs/action-bar/examples/action-bar-mobile-example.component.html
@@ -8,13 +8,10 @@ <h3 fd-action-bar-title>Page Title</h3>
             <div fd-action-bar-description>Action bar Description</div>
         </div>
         <div fd-action-bar-actions>
-            <fd-popover>
+            <fd-popover placement="bottom-end">
                 <fd-popover-control>
-                    <button aria-label="More"
-                            aria-haspopup="true"
-                            fd-button
-                            [fdType]="'light'"
-                            [glyph]="'overflow'"></button>
+                    <button aria-label="More" aria-haspopup="true" fd-button [fdType]="'light'"
+                        [glyph]="'overflow'"></button>
                 </fd-popover-control>
                 <fd-popover-body>
                     <fd-menu>
@@ -40,4 +37,4 @@ <h3 fd-action-bar-title>Page Title</h3>
             </fd-popover>
         </div>
     </div>
-</div>
+</div>
diff --git a/library/src/lib/action-bar/action-bar-mobile/action-bar-mobile.directive.ts b/library/src/lib/action-bar/action-bar-mobile/action-bar-mobile.directive.ts
@@ -12,9 +12,6 @@ import { Directive } from '@angular/core';
  */
 @Directive({
     // tslint:disable-next-line:directive-selector
-    selector: '[fd-action-bar-mobile]',
-    host: {
-        style: 'width: 319px;'
-    }
+    selector: '[fd-action-bar-mobile]'
 })
-export class ActionBarMobileDirective {}
+export class ActionBarMobileDirective { }