ContextMenu position (on mobile devices)

Flow
1

Hi,

This question is about components when application is viewed on mobile devices, not desktop browsers.

Currently ContextMenu, when opened, slides up from the bottom of the screen. (This is also true for MenuBar component, which open in the same way)
Is there any way to make menu slide down from top of the screen?

The use case is this: the application we are building is responsive, and on mobile devices it shows hamburger menu icon, which opens the menu when clicked. Menu icon is positioned in application header. So it is kind of weird for application to have menu icon on top of the screen, that opens menu from the bottom of the screen.

Edit: forgot to mention Vaadin version which is v13.

Thanks,
Igor

2

Hi Igor,

First you need to set --vaadin-overlay-viewport-bottom to auto.

Then you’ll need to change the animations:

@media (max-width: 420px), (max-height: 420px) {
  :host([opening]
) [part="overlay"]
 {
    animation: 0.2s menu-enter cubic-bezier(.215, .61, .355, 1) both;
  }

  :host([closing]
) [part="overlay"]
 {
    animation: 0.14s 0.14s menu-exit cubic-bezier(.55, .055, .675, .19) both;
  }
}

@keyframes menu-enter {
  0% {
    transform: translateY(-150%);
  }
}

@keyframes menu-exit {
  100% {
    transform: translateY(-150%);
  }
}

Source: https://github.com/vaadin/vaadin-lumo-styles/blob/master/mixins/menu-overlay.html.

3

Thanks Joacim, after little bit of tweaking it worked like a charm. Best regards