DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

David Dal Busco
David Dal Busco

Posted on • Originally published at Medium

Ionic: Fullscreen Modal & Menu Popover

Photo by Dino Reichmuth on Unsplash

Ionic is not just an amazing design system made for mobile devices but also work like a charm on desktop. We use it at DeckDeckGo particularly for that reason.

While we developed our editor for presentations, we implemented the following two tricks I am about to share with you and which I hope, may be one day useful to you too.


Fullscreen Modal

Out of the box, regardless which platform’s style is applied, as soon as your browser reaches the size of 768x600 pixels, an Ionic modal will not be displayed fullscreen anymore but rather as a centered popup.

While that might fits almost all the use cases, there might be one which would request a full screen modal. Indeed, you might want to present multiple information to the user, therefore need space, but might not want to add a page in the history stack.

For example, users editing their slides with our editor are able to ship their decks as Progressive Web Apps. Upon request, we are packaging their presentations in PWAs and are deploying these online. As it is quite a process and something which the user has to explicitly trigger, we have decided to present all the information in a modal rather than using a navigation, avoiding possible back and forth errors πŸ˜‡.


Assuming you are not looking to make all your modals fullscreen but only some, I suggest that we style the modals with the help of a CSS class selector which we can apply as displayed on the documentation.

Angular:

async presentModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    cssClass: 'fullscreen'
  });
  await modal.present();
}
Enter fullscreen mode Exit fullscreen mode

Stencil:

async presentModal() {
  const modal = await modalController.create({
    component: 'app-page-modal',
    cssClass: 'fullscreen'
  });
  await modal.present();
}
Enter fullscreen mode Exit fullscreen mode

React:

<IonModal isOpen={showModal} cssClass="fullscreen">
 <PageModal></PageModal>
</IonModal>
Enter fullscreen mode Exit fullscreen mode

Vue:

<script>
import Modal from './modal.vue'

export default {
  methods: {
    openModal() {
      return this.$ionic.modalController
        .create({
          component: Modal,
          cssClass: 'fullscreen'
        })
        .then(m => m.present())
    },
  },
}
</script>
Enter fullscreen mode Exit fullscreen mode

The style, .fullscreen, should be defined on the application level and not higher in the hierarchy than ion-app, because the modals are going to be injected in the DOM in ion-modal elements which are direct descendant of the app container. For example, in our Stencil application I defined it in app.css or, in a React one, I define it in a stylesheet I import in App.tsx .

It should contain the information to apply a full screen sizing (width/height) and indication that the modal should not be displayed with rounded corner.

ion-modal.fullscreen {
  --width: 100%;
  --height: 100%;
  --border-radius: 0;
}
Enter fullscreen mode Exit fullscreen mode

That’s it, nothing more, nothing less πŸ˜„.


Popover Menu

Not sure anyone else would actually have the following requirement, but you might need, as we did in DeckDeckGo, a menu which is not tied to the navigation respectively which is not the ion-menu .

For example, we had to find a solution to display options without hiding all the content when our users were editing their slides. Even though we could have developed a custom popup for such purpose, we thought that reusing the Ionic popover would be nice. I mean, look at that sweat animation triggered on opening 🀩.


As in previous chapter about the modal, I am assuming that we might want to only apply this effect on specific popovers of our application, that’s why we are again going to use a CSS style class. Moreover, we also want to explicitly use the mode md to give the popover a β€œflat” style and avoid the display of a backdrop. This last point is not mandatory but make sense if you want your user to be still able to see clearly what’s next to the β€œpopover menu”.

Angular:

async presentPopover() {
  const popover = await this.popoverController.create({
    component: PopoverPage,
    cssClass: 'menu',
    mode: 'md',
    showBackdrop: false
  });
  await popover.present();
}
Enter fullscreen mode Exit fullscreen mode

Stencil:

async presentPopover() {
  const popover = await popoverController.create({
    component: 'app-page-popover',
    cssClass: 'menu',
    mode: 'md',
    showBackdrop: false
  });
  await popover.present();
}
Enter fullscreen mode Exit fullscreen mode

React:

<IonPopover
    isOpen={showPopover}
    cssClass="menu"
    mode="md"
    showBackdrop={false}>
 <PagePopover></PagePopover>
</IonPopover>
Enter fullscreen mode Exit fullscreen mode

Vue:

<script>
import Popover from './popover.vue'

export default {
  methods: {
    openPopover() {
      return this.$ionic.popoverController
        .create({
          component: Popover,
          cssClass: 'menu',
          mode: 'md',
          showBackdrop: true
        })
        .then(m => m.present())
    },
  },
}
</script>
Enter fullscreen mode Exit fullscreen mode

We define the style on the root level of the application because the ion-popover elements are added as direct children of the main ion-app element.

We set a width, for example 540px, and a maximal value because we want to fit smaller devices too.

ion-popover.menu {
  --width: 540px;
  --max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Thanks to this definition, we were able to change the width of the popover, but we not yet able to set the correct position, the right side of the screen, and specify a height which covers the all window.

Even though we are going to achieve our goal, I have to say that unfortunately, it is only possible with the help of the infamous !important selector. I opened a feature request about it a while ago and it is one of these suggestions which is so rarely used, that the solution should come from the community, what makes sense to my eyes. Unfortunately too, I did not have time yet to provide a pull request, maybe someday.

Meanwhile, let’s use the following style. First of all, we set the popover to the top right and we also transform its origin to match that position too. Moreover, we set a default height to 100% to match the screen and add a bit of strictly styling as defining a background and a light box-shadow.

ion-popover.menu div.popover-content {
  top: 0 !important;
  left: inherit !important;
  right: 0;

  transform-origin: right top !important;

  --min-height: 100%;

  background: white;

  box-shadow: -8px 0 16px rgba(0, 0, 0, 0.12);
  border-radius: 0;
}
Enter fullscreen mode Exit fullscreen mode

That’s it, our popover can act as a menu πŸ˜ƒ.


Conclusion

Give a try to DeckDeckGo for your next presentation and if you are up to improve these styles or have any other suggestion, please do collaborate to our project in GitHub, we are welcoming any contributions and idea.

To infinity and beyond!

David

Top comments (1)

Collapse
 
dotnetkow profile image
Matt Netkow

Once again, unsurprisingly, this is πŸ”₯πŸ”₯πŸ”₯!

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.