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

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