Mobile popover menu sample

Mobile popover menu sample

  

Where can I find a sample of how to use the"popover menu" that is part of the new mobile application widgets?

Hi CJ,

Here's a simple example.

Basically, the widget has two placeholders: one for the content that will be clicked to show the options and one for the options themselves.

Hi Aurelio,

Sorry for my late reply. Thanks for your example. I have a few questions:

1) Can you set the position of the "popover" content?

2) How do you close the "popover" once a "menu" option has been selected?


Hi CJ,

  1. Yes, by manipulating the "popover-bottom" CSS class. So, for instance, if you want the popover to appear below the content, you can use the following CSS:

    .popover-bottom {
        transform: translate(-50%, 100%) !important;
    }
  2. I couldn't find a simple way of doing that, but I managed to find a workaround. In the client actions executed by the popover widgets, run the following javascript (you're gonna have to add jQuery to your module's and screen's "Required Scripts"):

    $('.popover-bottom').click();