How to create a popup element to be over md-dialog? - angularjs

Question

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

Answer 1

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