Making buttons in popup one per line

ionic-v1
1

I’ve created this popup using

    var myPopup = $ionicPopup.show({
    title: 'Choose Address',
    buttons:[
        {
            text: "Don't show me again",
            type: 'button-positive'
        },
        {
            text: "Close",
            type: 'button-positive',
            onTap: function(){
                myPopup.close();
            }
        },
    ]
});

This places the two buttons created next to teach other.

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 know I can use template: <input type='button'><br> in place of the buttons tag but using the buttons tag making it a lot easier to add functionality on click.

2

If you are modifying the scss files, remove the flex related properties and add a 100% width to the buttons.

https://github.com/driftyco/ionic/blob/master/scss/_popup.scss#L75-L93

3

How would I go about editing it so that it only affects the buttons in this individual popup? Is there a way to add a custom style to use to the buttons array used to create the buttons?

4

This topics maybe helps you

5

I know this is an old topic but, I created a solution for block-buttons inside popup-buttons.
All you have to do is add flex-wrap: wrap to .popup-buttons. And then set flex to none on your custom button class. This makes child items fill properly for 100% width.

.popup-buttons {
	@include flex-wrap(wrap);

	.button.button-block {

		@include flex(none);
		width: 100% !important;
		margin-top: 0px;

		&:last-child {
			margin-right: 0px;
			margin-bottom: 0px;
		}
	}
}

In my case, I named my custom class button-block, but you can choose your own.

Using the first example.

var myPopup = $ionicPopup.show({
    title: 'Choose Address',
    buttons:[
        {
            text: "Don't show me again",
            type: 'button-positive button-block'
        },
        {
            text: "Close",
            type: 'button-positive button-block',
            onTap: function(){
                myPopup.close();
            }
        },
    ]
});

Hope it helps!