Different input types in alert controller

Hey guys

I’m looking to create a pop up where by the user inputs data, then selects one of two radio options by the UI seems to screw up when I have a combination of both text type and radio type in a pop-up.
Here is my code:

and the outcome is this:


Do you need to give those radio inputs a name?

There is any solution for this issue , i still have same problem.

Use a modal. Alerts are supposed to be very simple.

Its happening in ionic 4 as well. Is there any fix instead of a modal?


Modals or popovers

Thanks for your reply, but I specifically need an alert.

Sadly you need to create a custom modal with specific width and height, cuz alerts doesn’t support yet multiple different input types :frowning: I had the same problem few weeks ago, and i didn’t find other solution than create a custom modal.

First i add this code in app.scss:

ion-modal {
  &.small-modal {
    div.modal-wrapper {
      background-color: rgba(0, 0, 0, 0.5);
          top: 20%;
          left: 10%;
          width: 80%;
          height: 300px;
          border-radius: 20px;
          .scroll-content {
              border-radius: 20px;

This create a small-modal class and later, when i open the modal, i add the custom css class like:

let alertModal = this.modalCtrl.create(AlertModalPage, {id:userID,name:username}, { cssClass: 'small-modal' });
1 Like

Then u will have to write your own (which is the essence of everyone’s comment here and to all others wanting this) using the stencil code of the ionic version u can find on GitHub

Thank you very much! It works great. :grinning:

1 Like