Notification causes other UI items to be unclickable when set to bottom right

[masbaehr]

Hi, i noticed some issue where notification has a too big container and causes other UI items (outside of the notification) to be unclickable. It seems related to the @media query which i also posted. If i remove those, the container has a proper size.

Found a way to fix this in the vaadin-notification-container CSS

Workaround (Not perfect though) - for those who find this issue while it is not fixed

<dom-module id="vaadin-notification-container-fix" theme-for="vaadin-notification-container">
  <template>
     <style>
        :host  {
          flex-direction: row;
        } 
     </style>
  </template>
</dom-module>
<dom-module id="vaadin-notification-card-fix" theme-for="vaadin-notification-card">
  <template>
     <style>
        :host([slot^="middle"])  {
          top: 50%;
        } 
     </style>
  </template>
</dom-module>

[denis-anisimov]

Please provide a source code (which I can copy-paste) or add a project (based on https://github.com/vaadin/skeleton-starter-flow) which I can use to reproduce the issue.

It looks like this is a client side vaadin-notification web component issue. If you are able to make a proper description for this component then you may make this issue in the https://github.com/vaadin/vaadin-notification right away (I'm pretty sure this is the web component issue, the question is only how to make steps to reproduce to be able to move it there).

[masbaehr]

You can copy and paste this code. I wasn't aware that the other github is for flow. I thought it is for old Vaadin8 :/ (to be honest all those github issue trackers are kinda confusing :/ ) Edit: removed code as denis posted a better one

[denis-anisimov]

to be honest all those github issue trackers are kinda confusing

Yes, they are even for me.

The source code requires specific project: it's Spring based and depends on Button.

Below is the source code which can be copy-pasted to the notification project as a test as is. Steps to reproduce:

• open URL.
• There button clickme is not accessible : you can't click (nothing happens)
• If you close the shown notification then click works as it should: it opens another notification.

package com.vaadin.flow.component.notification.tests;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.H4;
import com.vaadin.flow.component.html.NativeButton;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.Notification.Position;
import com.vaadin.flow.router.BeforeEnterEvent;
import com.vaadin.flow.router.BeforeEnterObserver;
import com.vaadin.flow.router.Route;

@Route("notificationtest")
public class NotificationTest extends Div implements BeforeEnterObserver {

    @Override
    public void beforeEnter(BeforeEnterEvent event) {
        init();
    }

    public void init() {
        NativeButton btn = new NativeButton("clickme", listener -> {
            Notification notification = createNotification("123", "123", "123");
            notification.open();
        });
        btn.getStyle().set("position", "fixed");
        btn.getStyle().set("right", "366px");
        btn.getStyle().set("bottom", "100px");

        add(btn);

        Notification notification = createNotification("Hello", "Max",
                "Tomorrow");
        notification.open();

    }

    private Notification createNotification(String title, String decription,
            String timeline) {

        Div taskNotification = new Div();
        taskNotification.getStyle().set("min-width", "255px");
        Notification notification = new Notification(taskNotification);

        H4 hdr = new H4(title);
        hdr.getStyle().set("margin-top", "0");
        taskNotification.add(hdr);

        Paragraph p = new Paragraph();
        p.setText(decription);
        taskNotification.add(p);

        Paragraph timelineP = new Paragraph();
        timelineP.setText(timeline);
        taskNotification.add(timelineP);

        NativeButton btn = new NativeButton("OK");
        btn.getStyle().set("margin-right", "10px");
        btn.addClickListener(listener -> {
            notification.close();
        });
        taskNotification.add(btn);

        notification.setPosition(Position.BOTTOM_END);
        notification.setDuration(0);
        return notification;

    }

}

[web-padawan]

Closing as duplicate of #103 which contains an example of how to reproduce the issue with the web component demos.