How to force popover with MD style in iOS device

Ionic Framework ionic-v3
1

I want to force the MD style on a popover control in my app even when it is installed in an iOS device. Personally, I think it looks better and I see it in the Google app.

Is this possible? If so, how?

1 Like
2

@brandyshea you posted the above quote back in February. Is this possible now with RC1? I’m only interested in the popover control

1 Like
3

I found the Platform Specific Styles in the docs and the Config API docs.

Based on those docs, I added the following config entries but I don’t get the MD style for the popover in an iOS device.

imports: [
    IonicModule.forRoot(MyApp, {
      popoverEnter: 'popover-md-pop-in',
      popoverLeave: 'popover-md-pop-out'
    }),
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig)
  ],

Am I missing something or is this a bug?

4

For anybody else out there asking the same question, this is a bug

5

I find a workaround for that, it starts by adding the popoverEnter and popoverLeave config.

      popoverEnter: 'popover-md-pop-in',
      popoverLeave: 'popover-md-pop-out'

and in popover creation just add ‘popover-md’ class:

let popover = this.popoverCtrl.create('SelectMenuPage', {}, { cssClass: 'popover-md' });
popover.present({
  ev: myEvent
});
1 Like
6

Try this (this will set the global style to ‘md’ mode):

this.popoverCtrl.config.set('mode', 'md');

Remember to set back to ios mode when popover opened.

this.popoverCtrl.config.set('mode', 'ios');
7

This does work. How do I turn it off when the popover opens? Thanks

this.popoverCtrl.config.set('mode', 'ios');

        let popover = this.popoverCtrl.create(popoverPage);
        popover.present({
          ev: myEvent
        });
8

Use the controller inside modal:

import { ViewController } from 'ionic-angular';
constructor(
    private viewCtrl: ViewController
){}
...
this.viewCtrl.dismiss();