Hello, I'm trying to create a custom popup

2020-10-25 08_57_40-Ionic Lab and 32 more pages - Personal - Microsoft​ Edge

the character escape for new lines in the code is not working and the label for the input got lost somewhere… Also the popup dismisses when the handler is empty

let alert = this.alertCtrl.create({

      header: trip.name,

      subHeader: "Enter the number of slots\r\nPricing for the slots is " + trip.price + "\r\n" +

      "Slots remaining " + trip.slots + "\r\n"+ "Bookable slots " + (trip.slots*.1),

      inputs: [

        {

          label: 'Slots',

          name: 'Slots',

          placeholder: 'Slots',

          type: 'number',

          value: this.tripvalues,

          max: Math.trunc((trip.slots*.1)),

          min: 1

        }

      ],

      buttons: [

        {

          text: 'Cancel',

          role: 'cancel',

          handler: data => {

            console.log('Cancel clicked');

          }

        },

        {

          text: 'Login',

          handler: data => {

            

          }

        }

      ]

    });

    (await alert).present();

  }

Also how do I implement something like this??

2020-10-25 09_03_08-Shopping Cart Item Quantity Increment Decrement with AJAX - Phppot and 34 more p

I think what you’re trying to do goes beyond what alerts are intended for. I would make a custom modal instead. Also, generally, whitespace is something that shouldn’t be micromanaged in HTML, but if you’re going to insist, you probably want to look at the CSS white-space property.

I wasn’t able to add the buttons for incrementing
However I achieved success with creating line breaks and that was enough
When it stopped looking clumsy I liked it
Here is what I ended up with

let alert = this.alertController.create({
      backdropDismiss: false,
      subHeader: 'Per slot '+ ' : Ksh ' + trip.price + ' per slot',
      message: "Enter the number of slots:" + "<br>" +
      "All slots: " + trip.slots + "<br>" +
      "Slots remaining: " + trip.availableslots + "<br>" + 
      "Maximum Bookable slots: " + Math.round(trip.slots*.1),
      header: trip.name,
      cssClass: 'buttonCss',
      mode: 'ios',
      inputs: [
        {
          name: 'slots',
          placeholder: 'Slots',
          type: 'number',
          value: this.tripvalues,
          max: Math.round((trip.slots*.1)),
          min: 1,
          cssClass: 'specialClass',
          attributes: {
            max: Math.round((trip.slots*.1)),
            inputmode: 'decimal'
          }
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'danger',
          handler: data => {
            //console.log('Cancel clicked');
          }
        },
        {
          text: 'Submit',
          cssClass: 'success',
          handler: data => {
            //console.log(type of data.slots == 40)
            if(parseInt(data.slots) == undefined ||
              isNaN(parseInt(data.slots)) ||
              parseInt(data.slots) > (trip.slots*.1) || 
              parseInt(data.slots)<=0 || 
              parseInt(data.slots) > (trip.availableslots)
            ){
              this.dangerToast(message);
              return false;
            } else{
              this.presentAlertConfirm(trip, parseInt(data.slots));
            }
          }
        }
      ]
    });
    (await alert).present();
  }