Here is my code: Does anyone experience the same problem? Off-screen on Chrome-Mozzila etc why?
<md-menu>
<md-button class="md-icon-button" ng-click="$mdOpenMenu()">
<md-icon class="icon-18">settings</md-icon>
<md-tooltip>Page Settings</md-tooltip>
</md-button>
</md-menu>
Related
The menu content is partly hidden instead of positioning properly.
<md-menu>
<md-button ng-click="$mdMenu.open($event)">
<div layout="row"><div>Edit</div><md-icon md-menu-origin>more_vert</md-icon></div>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button>Save</md-button>
</md-menu-item>
<md-menu-item>
<md-button>Delete</md-button>
</md-menu-item>
<md-menu-item>
<md-button>Print</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Now that I see your view, the problem is not the code, the template is ok, the problem is that you are adding this menu in the bottom of the page, and not using the offset option to correct the position of it, try different values for the y axis.
<md-menu md-offset="0 -100">
I am using Angular Material Design button, and assign class "md-icon-button md-primary" to it. The code snippet is shown below.
<md-button aria-label="Subscribe" class="md-icon-button md-primary">
<md-icon md-svg-icon="img/ic_alarm_on_black_24px.svg"></md-icon>
</md-button>
The icon of the button is correct, but the 'md-primary' color is not applied. I tried other icons at https://material.io/icons/, and tried other class like "md-accent", but no luck at the moment.
Any hints to solve the issue would be appreciated. Thank you!
It's strange, because i had no problem with it. Did you try to apply another class?
<md-button aria-label="Subscribe" class="md-icon-button md-accent">
<md-icon md-font-set="material-icons"> accessibility </md-icon>
</md-button>
<md-button aria-label="Subscribe" class="md-icon-button md-primary">
<md-icon md-font-set="material-icons"> accessibility </md-icon>
</md-button>
Example
My menu is closing after I click on my toggleSharebutton. How can i prevent this. I use angularJS with Angular material
Here is my code:
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="toggleShare()">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
You can use md-prevent-menu-close attribute to stop menu from closing as suggested in offical doc. Here is how you write code
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="toggleShare()" md-prevent-menu-close="md-prevent-menu-close">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Here is a working example of your desired result using this method.
http://codepen.io/next1/pen/aNadYR
The answer above should be the accepted answer, but you can also use ngMouseup instead of ngClick and it works just the same :)
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-mouseup="toggleShare()">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
I see a sub-menu working in the "menu bar" example - https://material.angularjs.org/latest/demo/menuBar
There are no examples of sub-menus for the actual menu component.
I looked at the menu bar example and it uses md-menu, so it should be supported in the regular menu, right? I tried it and it breaks the entire menu (top level also stops working).
I'm guessing that it's just not supported? I found this discussion, but I'm not sure what to make of it.
Check here, there are sub-menu in this example. version 1.0.5
<md-menu-item>
<md-menu style="padding:0px;">
<md-menu-item>
<!-- ACCOUNT SETTINGS -->
<md-button ng-click="$mdOpenMenu()">
<md-icon md-font-set="md">assignment_ind</md-icon>
Account Settings
</md-button>
</md-menu-item>
<!-- SUBMENU-->
<md-menu-content>
<!-- CHANGE PASSWORD -->
<md-menu-item>
<md-button>
<md-icon md-font-set="md">security</md-icon>
Change Pasword
</md-button>
</md-menu-item>
<!-- DELETE ACCOUNT -->
<md-menu-item>
<md-button>
<md-icon md-font-set="md">delete_forever</md-icon>
Delete Account
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
I have added angular-material to my meanjs project and was playing with styling first elements. I also made sure every other styles were removed from that project.. so only default angular styles are being loaded.
Now, for example, I created a md-menu in a md-toolbar using this code here:
<md-menu md-position-mode="target-right target">
<md-button aria-label="Open profile actions" ng-click="openMenu($mdOpenMenu, $event)" md-menu-origin>
<img alt="{{authentication.user.displayName}}" class="header-profile-image" data-ng-src="{{authentication.user.profileImageURL}}"/>
<span data-ng-bind="authentication.user.displayName"></span>
</md-button>
<md-menu-content width="4">
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.profile">
<ng-md-icon icon="account_circle"></ng-md-icon>
<span md-menu-align-target>Edit Profile</span>
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.picture">
<ng-md-icon icon="photo" md-menu-align-target></ng-md-icon>
Change Profile Picture
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active" data-ng-show="authentication.user.provider === 'local'">
<md-button data-ui-sref="settings.password">
<ng-md-icon icon="lock" md-menu-align-target></ng-md-icon>
Change Password
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.accounts">
<ng-md-icon icon="share" md-menu-align-target></ng-md-icon>
Manage Social Accounts
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item data-ui-sref-active="active">
<md-button href="/api/auth/signout" target="_self">
<ng-md-icon icon="logout" md-menu-align-target></ng-md-icon>
Signout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
However this results in a menu with mispositioned texts and icons, even if I delete the icons. They should be vertically centered like you can see here:
https://material.angularjs.org/HEAD/#/demo/material.components.menu
Same problem came up creating a menu icon like this:
<md-button aria-label="Open the sidebar" class="md-icon-button menu" ng-click="toggleSideNav()">
<ng-md-icon icon="menu" style="fill: #fff;" md-menu-align-target></ng-md-icon>
</md-button>
Which results in this here
However.. it's no problem for me to solve this with some css rules.. but I guess the problem must be somewhere else? anybody has an idea? I checked the angular-material documentation a thousand times and can't figure out what's wrong.
thanks!
It's because you're mixing Angular Material with Angular Material Icons (ng-md-icon), two different projects, but the ng-md-icon guys have patched their library to run alongside Angular Material, but you have to use the Angular Material directive md-icon like so:
Instead of:
<ng-md-icon icon="account_circle"></ng-md-icon>
You would use:
<md-icon ng-md-icon icon="account_circle"></md-icon>