Popover opens displaced on first opening, but falls into place on next opening

Flow
1

As can be seen here the popover is misplaced (down and to the left) on first opening:

image
image806×966 73.5 KB

On the next and all following openings, it’s placed correctly:

image
image678×988 69.7 KB

On the first opening, it actually open even further away, down and to the left, but then quickly (in a split second) moves towards the bell icon, only it doesn’t go all the way, as can be seen.

Any ideas?

Br Mikael

A bit of code, nothing special:

        Popover popover = new Popover();
        popover.setTarget(notificationsButton);
        popover.addThemeVariants(PopoverVariant.ARROW, PopoverVariant.LUMO_NO_PADDING);
        popover.setPosition(PopoverPosition.BOTTOM);
        popover.setAriaLabelledBy("notifications");
        popover.setCloseOnEsc(false);
        popover.setCloseOnOutsideClick(false);
        popover.addClassName("viavea-popover-pending-tasks");

.viavea-popover-pending-tasks {
    width: 500px;
    height: 600px;
}
2

Have you tried using setWidth() and setHeight() instead? These are proper ways to set size of the Popover. Your CSS is applied to vaadin-popover-overlay and in order for it to work properly, it should be instead applied to <div id="overlay"> inside of that element’s shadow DOM (which is what methods I mentioned do under the hood).

3 Likes
3

Thanks, you are right, it works using setHeight and setWidth.

Thanks