Different input types in alert controller

Ionic Framework ionic-v3
1

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:

25 am
Screen Shot 2017-08-31 at 11.34.25 am.jpg1392×150 74.5 KB

and the outcome is this:
33 am
Screen Shot 2017-08-31 at 11.34.33 am.jpg1358×918 85 KB

Thanks

2

Do you need to give those radio inputs a name?

3

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

4

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

5

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

09%20PM

6

Modals or popovers

7

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

8

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);
      ion-content.content{
          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' });
alertModal.present();
1 Like
9

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

10

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

1 Like