I'm trying to create a notification bar that shows up on the left bottom of the bell icon when it's clicked.
An example can be seen here : http://wrapbootstrap.com/preview/WB011H985
I tried giving it a specific margin-top (140px) but when you scroll down a little and clicked the bell, notification shows up way too below.
http://codepen.io/anon/pen/NxgePe
HTML
<div class="md-menu-demo menudemoMenuPositionModes" ng-controller="PositionDemoCtrl as ctrl" ng-cloak="" style="min-height:350px;" ng-app="MyApp">
<div class="menu-demo-container" layout-align="start center" layout="column">
<div class="menus" layout-wrap="" layout="row" layout-fill="" layout-align="space-between center" style="min-height:200px;">
<div layout="column" flex-sm="100" flex="33" layout-align="center center">
<p><code>md-position-mode="target-right target"</code></p>
<md-menu md-position-mode="">
<md-button aria-label="Open demo menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
<img ng-src="https://cdn4.iconfinder.com/data/icons/unigrid-flat-basic/90/019_025_bell_ring_alarm_notice_notification_notify-32.png">
</md-button>
<md-menu-content width="6">
<md-menu-item ng-repeat="item in [1, 2, 3]">
<md-button ng-click="ctrl.announceClick($index)">
<div layout="row">
<p flex="">Option {{item}}</p>
<md-icon md-svg-icon="call:portable-wifi-off" style="margin: auto 3px auto 0;"></md-icon>
</div>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</div>
</div>
</div>
CSS
.menudemoMenuPositionModes .md-menu-demo {
padding: 24px; }
.menudemoMenuPositionModes .menu-demo-container {
min-height: 200px; }
#menu_container_0 {
background-color:red;
margin-top:140px;
}
JavaScript
angular
.module('MyApp',['ngMaterial', 'ngMessages'])
.config(function($mdIconProvider) {
$mdIconProvider
.iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
.iconSet("social", 'img/icons/sets/social-icons.svg', 24);
})
.controller('PositionDemoCtrl', function DemoCtrl($mdDialog) {
var originatorEv;
this.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
this.announceClick = function(index) {
$mdDialog.show(
$mdDialog.alert()
.title('You clicked!')
.textContent('You clicked the menu item at index ' + index)
.ok('Nice')
.targetEvent(originatorEv)
);
originatorEv = null;
};
});
Add an absolute positioning to the menu container...
In the case of your example, like this:
#menu_container_0 {
background-color:red;
position: absolute;
margin-top:140px;
}
http://codepen.io/anon/pen/VeWgvq
Related
I'm using AngularJs 1.7, and i've created a dropdown element that i want to add it to md-dialog, the problem is that my element (my-popup) always remains in the limits of the md-dialog - like in here
I want to achieve the same behaviour of the date-picker - as you can see - it's appears in the correct place and over the md-dialog - i wonder how it can done.
I've tried to append the popup to the body , but this way messed up the position of the popup - i guess there is a better way.
$scope.open = function(){
$scope.isShowMyPopUp = !$scope.isShowMyPopUp;
if(!!$scope.isShowMyPopUp){
let modalContainer = $('#myPopUp');
modalContainer.detach();
modalContainer.appendTo('body');
}
Here is the Example
You need to put your "myPopUp" div inside the dialog-content directly and modify your css like the following
HTML :
<md-dialog aria-label="Mango (Fruit)" class="mango-dialog">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="my-popup" ng-show="isShowMyPopUp" id-"myPopUp">
<div ng-repeat="item in daySelect">
<md-button class="md-raised md-primary" ng-class="{'selected':item.isSelected}" ng-click="select(item)"> {{item.text}}</md-button>
</div>
</div>
<div class="md-dialog-content">
<div layout-gt-xs="row">
<div flex-gt-xs>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"></md-datepicker>
</div>
<div flex-gt-xs style="position:relative;">
<h4>my-popup</h4>
<md-button class="md-raised md-primary" ng-click="open()">Open</md-button>
</div>
</div>
</div>
</md-dialog-content>
</form>
</md-dialog>
CSS :
.my-popup{
position:absolute;
top: 48px;
left: 104px;
width:250px;
height:250px;
background-color:gray;
z-index: 999;
overflow: auto;
}
md-dialog{
width:40%;
}
.selected {
background-color:green!important;
}
.mango-dialog {
overflow: visible;
}
I added mango-dialog class to your dialog to allow overflow , also I added z-index to the pop up to make sure it is on top
here is a working example
I want to make sidenav with angular material.
<div class="example-tabs-500-height elements-sidebar-example ">test1<!-- right sidebar -->
<section layout="row" flex>
<md-sidenav class="md-sidenav-left" md-component-id="left"
md-disable-backdrop md-whiteframe="4">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Disabled Backdrop</h1>
</md-toolbar>
<md-content layout-margin>
<p>
This sidenav is not showing any backdrop, where users can click on it, to close the sidenav.
</p>
</md-content>
</md-sidenav>
<md-content flex layout-padding>
<div layout="column" layout-align="top center">
<p>
Developers can also disable the backdrop of the sidenav.<br/>
This will disable the functionality to click outside to close the sidenav.
</p>
<div>
<md-button ng-click='toggleLeft("left")' class="md-raised">
Toggle Sidenavs
</md-button>
</div>
</div>
</md-content>
</section>
and in controller:
$scope.toggleLeft = toggleLeft;
// $scope.toggleRight = buildToggler('right');
function toggleLeft(componentId) {
console.log('toogle');
return function() {
$mdSidenav(componentId).toggle();
}
}
Function toggleLeft writes in console 'toogle'.
Why are you returning a function?
function() {
$mdSidenav(componentId).toggle();
}
Shou be only:
function toggleLeft(componentId) {
console.log('toogle');
$mdSidenav(componentId).toggle();
}
UPDATE
Take a look on this example: http://codepen.io/anon/pen/pEJOzg
I have an ng-if inside of an <md-menu> tag that toggles more info when the user clicks on the item in the menu. However, when I click on the menu item, the menu closes. When I reopen it, the DOM displays that the extra info is showing but it is not actually being displayed in the menu and the menu has not resized to fit what should be there.
Here is my menu code:
<md-menu>
<md-button aria-label="Open Notifications Menu" ng-click="$mdOpenMenu($event)">
<md-icon md-svg-icon="bell"></md-icon>
</md-button>
<md-menu-content width="5">
<md-menu-item ng-repeat="notification in vm.notificationList">
<div aria-label="Notification" ng-click="vm.showDetails(notification)" md-prevent-menu-close="md-prevent-menu-close">
<div layout="column">
<div flex layout="row" layout-align="start center">
<span flex><b>{{notification.title}}</b></span>
<span style="opacity: 0.5">{{vm.getTime(notification)}}</span>
</div>
<div ng-show="notification.showDetails">
<span style="opacity: 0.7">{{notification.details}}</span>
</div>
</div>
</div>
</md-menu-item>
</md-menu-content>
</md-menu>
Here is the function for the ng-click in typescript:
showDetails(message: any): void {
message.showDetails = !message.showDetails;
}
EDIT
I fixed the problem with the menu closing using md-prevent-menu-close... duh. I've updated the html. The problem is still the same though, the menu does not change size to display the new data.
EDIT
I fixed the problem with the content not showing by removing the md-button and replacing it with a div. I updated the html accordingly. The only problem now is that the menu will not adjust its height to fit the new content neatly.
Is this the kind of thing that you want? - CodePen
Markup
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
<md-menu>
<md-button aria-label="Open Notifications Menu" ng-click="$mdOpenMenu($event)">
Bell
</md-button>
<md-menu-content width="5">
<md-menu-item ng-repeat="notification in vm.notificationList" ng-click="vm.showDetails($index)" md-prevent-menu-close="md-prevent-menu-close" aria-label="Notification">
<div layout="column" flex>
<div flex layout="row" layout-align="start center">
<span flex><b>{{notification.title}}</b></span>
<span style="opacity: 0.5">22-08-2016 09:06</span>
</div>
<div ng-if="notification.showDetails">
<span style="opacity: 0.7">{{notification.details}}</span>
</div>
</div>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function() {
var vm = this;
vm.notificationList = [
{title: "Read", details: "Enjoy the book", showDetails: false},
{title: "Eat", details: "You're hungry", showDetails: false},
{title: "Dring", details: "Have a pint of lager", showDetails: false}
]
vm.showDetails = function (index) {
vm.notificationList[index].showDetails = !vm.notificationList[index].showDetails;
}
});
Use ng-show not ng-if. ng-if removes elements from the DOM permanently if some condition is no satisfied. ng-show just toggles between whether or not an element is hidden.
see this angular material demo at http://codepen.io/joyal/pen/mPpGBK
<div ng-controller="AppCtrl" layout="column" style="height:500px;" class="sidenavdemoBasicUsage" ng-app="MyApp">
<md-toolbar layout="column" class="main-toolbar md-medium-tall">
<span flex="flex">
<h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
</span>
</md-toolbar>
<section layout="row" flex="">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content layout-padding="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="">
Close Sidenav Left
</md-button>
<p hide-md="" show-gt-md="">
This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
</p>
</md-content>
</md-sidenav>
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<p>
The left sidenav will 'lock open' on a medium (>=960px wide) device.
</p>
<p>
The right sidenav will focus on a specific child element.
</p>
<div>
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="">
Toggle left
</md-button>
</div>
<div>
<md-button ng-click="toggleRight()" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<div layout="row">
<!--This is new-->
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding="">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-sidenav-focus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
</md-content>
</md-sidenav>
</div>
</section>
</div>
If you open the left side bar, it opens smoothly but if you open the right side bar, while opening and closing, a scroll bar appears on the page (horizontal scroll bar in the main content area).
How can I update the page so that right side bar opens and closes like left side bar (smoothly without scroll bar on content area)
You can use the overflow: hidden in your body, but it may effect to other component(s). Try this:
#sideNavContainer
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
Hope this help.
Here is my code: How can I rotate only the svg-arrow with angular on element box click ?
<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
<md-card-content layout="row" layout-align="start center">
<img src="../assets/icons/cd-icon-arrow.svg" class="buildrag-toggle">
<h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
<md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)">
<md-icon>add_circle_outline</md-icon>
</md-button>
</md-card-content>
</md-card>
Here is my button
Use ng-class to toggle a class when the button is clicked. Then use this class in css to rotate the image.
<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
<md-card-content layout="row" layout-align="start center">
<img src="../assets/icons/cd-icon-arrow.svg" ng-class="{'rotate': rotateImg}" class="buildrag-toggle">
<h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
<md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)" ng-click="rotateImg = !rotateImg">
<md-icon>add_circle_outline</md-icon>
</md-button>
</md-card-content>
</md-card>
.rotate {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
When your button is clicked you handle it in the controller and add a class
Have a look at this
Controller :
$scope.todoClicked = function(id) {
console.log("clicked", id);
if (!$scope.showMoreTab[id]) {
$scope.showMoreTab[id] = true;
angular.forEach($scope.todos, function(todo) {
if (id !== todo.id) {
$scope.showMoreTab[todo.id] = false;
}
});
} else {
$scope.showMoreTab[id] = false;
}
}
View :
<md-button class="md-icon-button md-toggle-icon" aria-label="More" ng-click="todoClicked(todo.id)" ng-class="{'toggled':showMoreTab[todo.id]}">
<i class="material-icons">
keyboard_arrow_down</i>
</md-button>
CSS :
.md-toggle-icon.toggled {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I am using a icon here but you can try it with svg as well.
<md-button class="md-icon-button md-toggle-icon" aria-label="More" ng-class="{'toggled':showMoreTab[todo.id]}" ng-click="todoClicked(todo.id)">
<md-icon md-svg-src="/material-design-icons/navigation/svg/design/ic_expand_more_36px.svg">
</md-icon>
</md-button>