$mdtoast position bottom of page on scroll - css

Question

$scope.addPlaylist = function(song) {
$scope.playlist.push(song);
var el = angular.element(document.body);
$mdToast.show(
$mdToast.simple()
.textContent(song.title + ' added to playlist.')
.position('bottom')
.hideDelay(3000)
.parent(el)
);
}
I am not experienced with CSS and position properties and have just started using angular material. I am trying to make use of the mdtoast service but cannot get it to position correctly at the bottom of the page.
Even after setting the element to document.body the position of the mdtoast hovers in the middle of the page when I scroll down, as shown in the attached capture. How can I make it pop out from the bottom of the page even after scrolling.
The relevant html code :
<md-toolbar class="md-theme-indigo">
<div class="md-toolbar-tools">
<a ui-sref="player.songs"><img src="assets\images\music-player.png" width="50px" height="50px"></img>
</a>
<md-button class="md-icon-button" aria-label="play" ng-click="stopSong()" ng-show="isPlaying">
<md-icon md-svg-icon="assets/icons/clear.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Stop
</md-tooltip>
</md-button>
<md-button class="md-icon-button" aria-label="play" ng-click="resumeSong()" ng-show="isPaused">
<md-icon md-svg-icon="assets/icons/play.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Resume
</md-tooltip>
</md-button>
<md-button class="md-icon-button" aria-label="pause" ng-click="pauseSong()" ng-show="isPlaying && !isPaused">
<md-icon md-svg-icon="assets/icons/pause.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Pause
</md-tooltip>
</md-button>
<md-button class="md-icon-button" aria-label="repeat" ng-click="enableLoop()">
<md-icon md-svg-icon="{{repeat_icon}}"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Repeat
</md-tooltip>
</md-button>
<span flex></span>
<h3 hide show-gt-sm>Music Player</h3>
<span flex></span>
<md-button ui-sref="player.radio" class="md-icon-button" aria-label="radio" ng-show="state === 'songs'">
<md-icon md-svg-icon="assets/icons/radio.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Go To Radio
</md-tooltip>
</md-button>
<md-button ui-sref="player.songs" class="md-icon-button" aria-label="songs" ng-show="state === 'radio'">
<md-icon md-svg-icon="assets/icons/queue_music.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Go To Songs
</md-tooltip>
</md-button>
<md-menu md-position-mode="target-right target" hide-gt-sm>
<md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
<md-icon md-svg-icon="assets/icons/settings.svg"></md-icon>
</md-button>
<md-menu-content width="6" layout-padding>
<label><md-icon md-svg-icon="assets/icons/volume_up_black.svg"></md-icon></label>
<md-slider md-discrete ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume"></md-slider>
<label ng-if="!isRadio"><md-icon md-svg-icon="assets/icons/fast_forward_black.svg"></md-icon></label>
<md-slider md-discrete ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-primary" ng-if=!isRadio></md-slider>
</md-menu-content>
</md-menu>
<md-menu md-position-mode="target-right target" layout="column" layout-align="center center">
<md-button class="md-icon-button" aria-label="controls" ng-click="$mdOpenMenu($event)">
<md-icon md-svg-icon="assets/icons/apps.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Apps
</md-tooltip>
</md-button>
<md-menu-content width="2">
<md-button ui-sref="reddit"><span md-menu-align-target>Reddit</span></md-button>
<md-divider></md-divider>
<md-button ui-sref="player.songs"><span md-menu-align-target>Music</span></md-button>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<md-progress-linear class="md-warn md-hue-3" md-mode="determinate" value="{{progress}}" ng-if="!isRadio"></md-progress-linear>
<section layout="row" layout-fill>
<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">
<md-sub class="md-toolbar-tools">Status<span ng-show="isPaused"> <span class="md-caption">Paused</span></span></h1>
<span flex></span>
<md-button class="md-primary" aria-label="play_all" ng-hide="!playlist.length" ng-click="nextSong()">{{isPlaying ? 'Next':'Play All'}}</md-button>
</md-toolbar>
<md-content layout="column" ng-show="isPlaying" layout-align="center center" layout-padding>
<md-subheader class="md-primary">{{playing}}</md-subheader>
</md-content>
<md-divider></md-divider>
<md-content layout="column" layout-padding>
<img src="assets/images/yeoman.png" width="130px;" height="100px;" style="margin-left: auto;margin-right: auto;" ng-hide="playlist.length">
<p class="md-caption" style="margin-left: auto;margin-right: auto; text-align: center;" " ng-hide="playlist.length">Add to this playlist by clicking the <md-icon md-svg-icon="assets/icons/menu_black.svg" style="color: #0F0;" aria-label="Alarm Icon"></md-icon> icon in the listing and selecting "Add To Playlist"</p>
<div layout="row">
<h3 class="md-title" style="color: green;" ng-show="playlist.length">Next Up</h3>
<span flex></span>
<md-button class="md-fab md-mini md-warn" aria-label="clear_all" ng-hide="!playlist.length" ng-click="clearPlaylist()">
<md-icon md-svg-icon="assets/icons/clear_all.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Clear Playlist
</md-tooltip>
</md-button>
</div>
<md-list ng-repeat="item in playlist track by $index" ng-show="playlist.length" id="toastParent">
<md-list-item class="md-list-item-text">
<p class="md-caption"><em>{{ item.title }}</em></p>
</md-list-item>
<hr/>
</md-list>
</md-content>
<md-divider></md-divider>
</md-sidenav>
<section layout="column" flex>
<md-toolbar class="md-theme-indigo" hide show-gt-sm>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="repeat" ng-click="prevSong()" ng-if="!isRadio">
<md-icon md-svg-icon="assets/icons/skip_previous.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Prev
</md-tooltip>
</md-button>
<md-slider ng-model="player.currentTime" step="1" min="1" max="{{player.duration}}" aria-label="seek" class="md-warn flex" style="padding-left: 20px; padding-right: 20px" ng-if="!isRadio"></md-slider>
<md-button class="md-icon-button" aria-label="repeat" ng-click="nextSong()" ng-if="!isRadio">
<md-icon md-svg-icon="assets/icons/skip_next.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Next
</md-tooltip>
</md-button>
<md-divider md-inset ng-if="!isRadio"></md-divider>
<md-button class="md-icon-button" aria-label="mute" ng-click="volMute()">
<md-icon md-svg-icon="assets/icons/volume_down.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Mute
</md-tooltip>
</md-button>
<md-slider ng-model="player.volume" step="0.1" min="0.0" max="1" aria-label="volume" class="md-warn md-hue-3 flex" style="padding-left: 20px; padding-right: 20px"></md-slider>
<md-button class="md-icon-button" aria-label="volfull" ng-click="volMax()">
<md-icon md-svg-icon="assets/icons/volume_up.svg"></md-icon>
<md-tooltip md-direction="bottom" md-visible="tooltipVisible" md-autohide="true">
Max
</md-tooltip>
</md-button>
</div>
</md-toolbar>
<img src="assets/play_stop.gif" alt="Loading" ng-if="loading" layout-fill>
<div ng-if="!loading" layout="column" layout-fill>
<md-button class="md-fab md-primary" style="position:fixed; bottom:0; left:0" aria-label="openSidebar" ng-click="openSidebar()" hide-gt-md>
<md-icon md-svg-src="assets/icons/featured_play_list.svg"></md-icon>
<md-tooltip md-direction="right" md-visible="tooltipVisible" md-autohide="true">
Show sidebar
</md-tooltip>
</md-button>
<md-content flex>
<section ng-cloak>
<div ui-view></div>
</section>
</md-content>
</div>
</section>
</section>
The $mdToast gets trigged when addPlaylist() is called from within the md-list-item element.

Answer 1

So... Angular Material has a couple of issues with $mdToast with positioning at the moment (see the Github issues). There is a workaround however: adding layout and flex directives to the parent elements should solve the issue.