Page 1 of 1

[INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Thu Aug 18, 2022 10:07 pm
by jinc

Hello,

I found a small style defect with the LWC version of the Calendar - particularly when there are more events that can be fit into the day. When you click and scroll on the +x more to show an OverflowPopup with all the events for that day and have another LWC version of Grid or component below the calendar component, the OverPopup renders behind the LWC below.

After some investigation, I found out that the b-panel class which implements a z-index value of 0 is causing the popup to render behind the second LWC component. I have attached a video below. I was not able to reproduce the defect on Bryntum demos but, did replicate it with simple LWC demos.


Re: [INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Mon Aug 22, 2022 3:13 pm
by alex.l

Hi jinc,

Is it your own popup or ours? Could you please share the code of that component and check z-index of grid component as well. Does it have default styling or custom?
Form z-index docs https://www.w3schools.com/cssref/pr_pos_z-index.asp

An element with greater stack order is always in front of an element with a lower stack order.

For easy workaround, please check what z-index this dialog has and set it to greater value using custom CSS class https://bryntum.com/docs/calendar/api/Core/widget/Widget#config-cls or https://bryntum.com/docs/calendar/api/Core/widget/Widget#config-style property


Re: [INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Thu Aug 25, 2022 7:11 pm
by jinc

The OverflowPopup would be yours as for the code it would be the Calendar example demo code:

host.create('Calendar', {
                date: new Date(2020, 9, 12),
                appendTo: 'container',
                features: {
                    eventTooltip: {
                        align: 'l-r',
                    },
                },
            });

I have also used the Bryntum Grid example demo code with no additional custom styling and displays this odd behavior.
When inspected the z-index of the grid has the same z-index of 0 as the OverflowPopup. It looks like it uses the same class b-panel style.


Re: [INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Thu Aug 25, 2022 7:20 pm
by jinc

I have checked another widget popup on the Calendar by right clicking on one of the calendar events but, unlike the OverflowPopup this popup does not hide behind the second component. It seems this one implements

b-float-root

class which has a higher z-index of 1100.


Re: [INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Thu Aug 25, 2022 8:06 pm
by Animal

The overflow popup is not a document level floating widget. It’s actually rendered inside the Calendar’s element.

So it’s the z-index of the Calendar itself which needs boosting to lift it above any following widget.


Re: [INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Wed Aug 31, 2022 8:10 pm
by jinc

Would this style fix be implemented on the Calendar component on your end as this means that every time we implement a calendar component we would need to boost the z-index for the widgets to behave correctly.


Re: [INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Thu Sep 01, 2022 9:40 am
by Animal

I think we can help with this. Here is a ticket: https://github.com/bryntum/support/issues/5156


Re: [INFO REQ] Calendar Overflow Popup is hidden behind grid component

Posted: Thu Sep 01, 2022 7:39 pm
by jinc

Thank you!