Create a show more option on click in my app

[Deepak1233]

I want to create a show more option in my app
I tried it with playing position absolute with lists and all
but didnt work anything
I am attaching images what m trying to achieve .

any help any reference guys?

[indraraj26]

use popover https://ionicframework.com/docs/api/components/popover/PopoverController/

[JensOlleOlsson]

Use modal and add a custom css
I made an example for you:

“more”

when you click it, it looks like this:

in your ts-file:

async openModal() {
    console.log("modal clicked");

    const modal = await this.modalController.create({
      component: ModalPage,
       cssClass: 'custom-modal-css'
       enterAnimation: youCanAddYourOwnAnimationHere
    });
    return await modal.present(); 
  }

in your global.scss/app.scss

.custom-modal-css .modal-wrapper {
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 60%; 
    height: 50%; 
    box-shadow: 0 4px 8px 0 #3b3b3b33, 0 6px 20px 0 #3b3b3b33;
    
}

You can also add an animation class to your modal. Modal by standard slides upward a little when they are opened, maybe you would like something different. I think you can find some tutorial

All the best

[Deepak1233]

Thank you Its great .Ty for example to make it more clear:slightly_smiling_face:

[Deepak1233]

Thankyou …great to know something ionic has is own for this