I'm trying to create a md-menu inside of a md-toolbar and have it open on click. My code for the button that would open the dropdown menu is below:
<md-button aria-label="Open menu" class="md-icon-button" ng-show="(data.isAdmin || getUIActions('context').length > 0) && options.omitHeaderOptions != 'true'" ng-click="$mdMenu.open()">
<md-icon md-menu-origin id="adminMenu">menu</md-icon>
</md-button>
I have two questions --
1) In a previous iteration of this code, I had ng-if on my md-button. With ng-if, the dropdown menu was always open and could not be closed. When I switched to ng-show or took out the condition completely, the menu is gone. Is there a reason why ng-show works and ng-if doesn't?
2) I copied the code for ng-click directly from the angular material documentation, but cannot seem to get the click to open up the menu. Am I missing something?
I was using v.1.1.0 when I encountered this issue. Once I updated to v.1.1.5, the problem got fixed.
Related
I am following the sample code as per this link:
http://angular-ui.github.io/bootstrap/versioned-docs/1.3.3/#/modal
The plunker sample here:
http://plnkr.co/edit/JMV4Hu2x9l9DA9gaGYaF?p=preview
I tried to define a custom template customModal.html using windowTemplateUrl to add a close button (top-right) to the modal box, but the modal dialog won't show properly and I see only dark background and the modal is kind dimmed. Also, the buttons are not responding.
Appreciate if someone could help me define such custom template to allow using close button for all similar modal dialog boxes.
Update: I want to explain why this is not a possible duplicate of this question as suggested. The other question is dealing with "Why we get error when we open the dialog when we specify the template only". In this question, I the template is not showing proper even though I followed the instruction to implement it.
Tarek
in your script template add
<div class="modal-header">
<button type="button" class="close" data-dismiss="dialog" data-ng-
click="cancel($event)">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4>Title</h4>
</div>
I am using md-menu-item elements in my md-menu. The menu is activated by a button - all is working fine and all uses default angular js.
Within each md-menu-item I have md-select inputs. It looks like this:
...
<md-menu-item>
<md-input-container>
<label>My Label</label>
<md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
<md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
{{foo.name}}
</md-option>
</md-select>
</md-input-container>
</md-menu-item>
...
If I open the menu via clicking the button - If I choose nothing and I click off of the <md-select> (anywhere on screen) the md-menu goes away like it should & all is well.
If I click into one of the <md-select> elements, then click somewhere in the screen, the <md-menu> closes, but I can still see the <md-select> element.
Is there a way to "nest" select elements within a menu item so that when I close the menu item, all child elements also close?
Here is a codepen example of what I am seeing.
Thank you for any suggestions!
To hide md-select when you click outside the box . I am using '$mdSelect.hide()' to close md-select dropdown menu. I just put following 3 lines in my main controller.
$(document).bind('click', function (event) {
$mdSelect.hide();
});
The problem here is with menu and select backdrops which are used to close corresponding elements, when clicked out. So it's angular material thing. You can change z-index of these backdrops. Defaults are specified in variables.scss file (as you can see menu's backdrop is above select's, so you close it first):
$z-index-menu: 100 !default;
$z-index-calendar-pane: 100 !default;
$z-index-select: 90 !default;
That's the only quick fix I see (you can change z-index for these backdrops just in your css).
We have an Angular site using UI Bootstrap & UI-Router
When in collapsed mode, if you click any open with a drop down, the menu re-collapses before the user can see the dropdown options.
Here's a plunker:
https://plnkr.co/edit/73s4kuFR2c9EuhMd6G4l
.... Why is SO making me paste code if I have a plunkr link ??
See plunker link for code example.
What am I overlooking?
-Thanks
You must remove ng-click="navCollapsed = true" from your div.collapse.navbar-collapse
It should look like this:
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
It will stop the wrong behavior.
I'm working with Angular Materia 0.10.1.
I have a md-button nested inside a md-list-item. Both elements triggers the ripple effect when clicked, and when I click the button, it triggers the ripple effect on both elements at the same time. I want to have ripples on the button or on the list element only, but never both at the same time.
<md-list flex>
<md-list-item ng-click="a('a')">
<p>Some name</p>
<md-button class="md-accent md-raised" ng-click="b('b', $event)">Do something</md-button>
</md-list-item>
</md-list>
I've used $event.stopPropagation() but it doesn't stop the ripples in the same way it stops nested click events.
This Plunker can demonstrate it better.
It seems to be something built into the md-primary class and how it works with the list item. If you look at the examples there are a few that have side buttons that do not exhibit this behavior
by simply swapping the class on your button to md-secondary it seems to fix your issue (styling is a separate one now though)
<md-button class="md-secondary md-raised" ng-click="b('b')">Do something</md-button>
http://plnkr.co/edit/4fo8u190gpKyoHznVbFM?p=preview
Alternatively, the example uses md-icon instead of buttons and that seems to work too.
It seems the collapse expression is not being triggered inside a closed accordion.
ng-hide however does work which is lacking the pretty animation of course.
I made this plunker to show this.
The radio buttons on top determine whether the box "collapse something" inside the accordion. If you open an accordion tab you can toggle it with the radio buttons. However if you have the accordion closed and select "yes" and open the accordion then, the ng-hide expression will have been triggered but not the collapse one.
<div data-collapse=" test != 'yes' ">
collapse something
</div>
Above will not show where's below will:
<div data-ng-hide=" test != 'yes' ">
show something
</div>
Now I guess this might have something to do with the accordion using collapse to show the accordion body...
I might have to go and create a collapse clone with animations if there is nothing else I can do.
Any ideas are appreciated.
I think you are dealing with a general bootstrap issue. If you toggle collapse on something with 0 height you result in an inline style of 0px;
<div data-collapse=" test != 'yes' " class="ng-binding collapsing" style="height: 0px;">