Moving buttons under each other in a pop-up menu using ionicPopup.show

Question

I created this popup using

        $ionicPopup.show({
        title: 'Choose Location...',
        buttons:[
            {
                text: "Current Location",
                type: 'button-positive',
                onTap: function(){
                    $scope.myLocation();
                }
            },
            {
                text: "Previous Locations",
                type: 'button-positive',
                onTap: function(){
                    $state.go('menu.listSelect');
                    //go to choose location page
                }

            },
            {
                text: "Address Book",
                type: 'button-positive',
                onTap: function(){

                    //go to address book
                }
            },
            {
                text: "Cancel",
                type: 'button-positive',
                onTap: function(){
                    console.log('cleek');
                    $scope.fillOptionPopup.close();
                }
            },
        ]

    });
};

This puts the buttons created next to each other, so

Is there a way to make the buttons so that they stretch across the width of the pop-up window, and each button is on a new line using this button creation format for pop-up windows?

I used this code instead of an array of buttons, and it gives me this what I want. But it ng-clickdoes not call the functions that I made from ontap from the array.

template:   '<button class="button button-positive" ng-mousedown="goMyLocation()">Current Location</button><br>'+
'<button class="button button-positive" ng-mousedown="goMenuList()">Previous Locations</button><br>'+
'<button class="button button-positive" ng-mousedown="goAddressBook()">Address Book</button><br>'+
'<button class="button button-positive" ng-mousedown="closePopup()">Close</button>'

Is there a way to make the buttons be one per line and the full width of the popup?

Answer 1

, , , . , , CSS -

, ( ), , ,

https://ionicframework.com/docs/v1/api/service/$ionicPopup/

Answer 2

, "". , show, css , .

, :

.popup-vertical-buttons button
{
    min-width: 100%;
    margin-bottom: 5px;
}
.popup-vertical-buttons .popup-buttons
{
    display: block;
}

show add:

cssClass: "popup-vertical-buttons"

Answer 3

, , ...

cssClass: "popup-vertical-buttons", :

$ionicPopup.show({
 tite: 'Some Title',
 cssClass: 'popup-vertical-buttons',
 buttons: [
  ...
]
});

Then in your CSS add these two lines:

.popup-vertical-buttons .popup-buttons {
  display: block;
}
.popup-vertical-buttons .popup-buttons .button{
  display:block;
  min-width: 100% !important;
}