Ionic 4: How to show full label on alert options programatically

Ionic Framework
1

Q) How do I show the full labels flowed to the next line, not truncated as in this screenshot?

Screenshot 2020-02-25 at 10.46.53

Note: Please do not suggest using an ionic select component, I am using my the alertController at the client’s request as they don’t like the default styling and it’s impossible to change that component.

I’ve tried:

  • CSS height: auto on each of the alert-tappable.sc-ion-alert-md but that causes them to disappear.
  • CSS on alert-radio-label, overflow: initial + white-space: normal: that just makes the line not cut off with dots, but still on one line.

I’m using this function:

  async showOptions() {
    var inputs = [];
    this.dataset.forEach(item => {
      inputs.push({        
        name: item.name,
        label: item.label,
        value: item,
        type: 'radio'
      })
    });
    
    
    var alert = await this._AlertController.create({      
      animated: false,
      header: this.title,      
      inputs: inputs,
      buttons: [{ 
        text: this._I8nService.label('cancel'),
        role: 'cancel',
        cssClass: 'secondary',
        handler: () => {
        }
      }, {
        text: this._I8nService.label('select'),
        handler: (selectedItem) => {
         // blah blah
        }
      }]
    });
    await alert.present();   
  }
2

Add css to add more pixels to the width of the popover, That should fix your issue.

3

Thanks but that’s not the correct solution. I am wanting to have the labels flow to a new line and I don’t want to screw with the styling of the alert component ideally.

4

Based on your initial question, it is. Now you’re asking something different. You’re still going to have to mess with css regardless. Good luck!

5

No problem messing with CSS, just having a tough time with this component today. Have modified my question text in bold as per your comment. Thanks.

6

when you expect the elements, check if they have a class that adds

overflow: hidden;
text-overflow: eclipse

and add a custom css class to override these.

7

Maybe I’m reading this backwards, and if so please ignore my intrusion, but if you’re saying “I’m not using <ion-select> because my client doesn’t like the way it normally looks, so I’m using AlertController instead”, I think you’re using AlertController either way. If that’s the case, I would recommend getting out of there (because, as you’re encountering, alerts are engineered for simplicity, not customization). How about using the Popover option for <ion-select>? It allows you to provide the component that is used, so you have total control over what it looks like.

1 Like
9

OK, I’m totally lost now.

My understanding is that there are alerts, action sheets, and popovers, all of which are internally “overlays” and should therefore behave similarly in terms of how they interact with other pages (and share the lion’s share of whatever bugs concern you). In terms of how much work the framework does for you from least to most, I would rank them popover > action sheet > alert. <ion-select> can use any of them.

With that in mind,

In my understanding, “the popover component” is something that I alone define, from A to Z. The popover controller presents my popover component as an overlay. Action sheet controllers and alert controllers do the same thing, but with components that are largely designed by Ionic.

So using the popover controller would seem to be the option that gives you the most control - far more than the alert controller.

But since that sounds diametrically opposed to what you seem to be saying, maybe I am just having a bad brain day.

11

In my project i used a lot of alert because of its simplicity. As the project was growing i was asked to add other options / change style progressively. Eventually it became too specific for simple alert in most of case, and now i end up using a lot of modal, which are 100% customisable.

I understand that you don’t want to dive in a new component as your stuff is already doing ALMOST what you want. But i have to says it was completely worth it. I learn to use modals and was able to fully customize it in a very short time as there are lots of tutorials about this.

Great advantage is that i don’t need to strip out everything now when someone wants me to make a small change that is not possible with a simple alert. So it’s a huge gain of time on the long run. And honestly you can master modal window in a very short time, (probably same with popover but i don’t have experience with it) and your topic is already 6h old.

12

You’re making your life harder than its suppose to be. I gave you the answer already and then you discredited it. Then EinfachHans dumbed it down for you even more and you still don’t get it. We helped you already but you seem not to want the answer…

13

Hey! Sorry but your answer wasn’t correct, thanks though. Appreciate all the feedback everyone, I will take another stab at popover and modals (which I am fully comfortable with already). Cheers!

14

FYI - I implemented the popover as suggested and it’s all good. Thanks for your insistence and clarification on the matter.

1 Like