Ionic popup positioning

hy guys,

i create popup, when i click one of list. i am facing a issue that my pop up screen display in center. But I need the screen appears just below the list.

Can you please tell me how to give position of my pop up appears bellow the list? :frowning:

this my code :

.controller('PopUp',function($scope, $ionicPopup) {
 var myPopup;

$ = [{
 name: 'Fried rice',
 expense: '8000',
 class: 'a',
 selected: ''
}, {
 name: 'Lemon Tea',
 expense: '4000',
 class: 'b',
 selected: ''

 // Triggered on a button click, or some other target
 $scope.showPopup = function(index) {

/*var x_pos = $(this).offset().left,
 y_pos = $(this).offset().top;

 // An elaborate, custom popup
 myPopup = ${
 templateUrl: 'templates/popup1.html',
 scope: $scope,
/*x: x_pos,
 y: y_pos */

myPopup.then(function(selectedItem) {
  $[index].selected = selectedItem;

$scope.closeInController = function(selectedItem) {


Thanks in advance

It really can’t be done? Thank you for any hint. :frowning:

I think it would be easier to put what you show on the popup below each row when clicked. If it’s a requeriment what I would do is:

// Put a div with this directive inside the template
.directive('movePopup', function($ionicPopup) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) { 
            element.parent().parent().css('top', rowHeight * scope.index + somethingElse + 'px');

// Popup creation
$scope.index = indexOfRow;
myPopup = ${
  templateUrl: 'templates/popup1.html',
  scope: $scope,
  cssClass: 'customPopup'

// On your stylesheet
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -$widthOfThePopup / 2; 
  /* _variables.scss has a variable for popup width */

On the template:
<div movePopup></div>

thanks for reply,

i want to show only a list of tags.
previously, you also help me in a case popup…

Yeah, I helped you before but now I don’t understand why the popup needs to be below the list.

The solution I provide is to place the popup below any row clicked and I just realized that you asked to place it below the list. Just in case, It can be easily adapted to do what you want.

Also, if you want to access the popup element use $ionicPopup._popupStack. This is an array and it’s not immediately available so a timeout will be necessary.

I want to put on the bottom of the list, because I don’t want to change what has been in design.
like this pict. ( tags - food, -drink, etc. )

whether it is the only way for this problem? i mean “to place the popup below any row clicked”

I see. In that case… have you tried a Popover? . The only problem is the styles for Android.

I haven’t tested the solution I gave you but it should work because you get the popup element and you just need to apply css with the help of the row index.

I have try made it with a popover, for data every list I make with ng-bind (which you teach), so I might be a little confused by the selectedItem later.

this is example my experiment

i think i start stack to selectedItem

Check this:

Now you only need to apply the necessary styles.

thanks for your help, finally this case solved…

and may i ask one more? only to understand…
in file index, there are any $index, and in file script there are index too.

whether the index of the default code angular/ionic?


It’s part of ng-repeat: