Move buttons below each other in popup using ionicPopup.show

Question

I've 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 places the buttons created next to each other like so

Is there a way to make the buttons so they stretch across the width of the popup and each button is on a new line using that format of creating buttons for the popups?

I've used this code in place of the buttons array and it gives me this, which is what I want. But the ng-click isn't calling the functions that I made out of the ontap's 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 get the buttons to be one per row and a full width of the popup?

Answer 1

There actually another option that I find "cleaner". In the object passed to the show method you can also define a css class for the popup, so you can use it to override the default ionic styles.

Specifically for your use case:

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

and in the object use pass to the show method add:

cssClass: "popup-vertical-buttons"