Premium support for our pure JavaScript UI components


Post 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.

Attachments
Screen Recording 2022-08-18 at 12.44.05 PM.mov
(17.99 MiB) Downloaded 18 times

Post 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

All the best,
Alex


Post 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.


Post 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.

Attachments
Screen Shot 2022-08-25 at 10.15.04 AM.png
Screen Shot 2022-08-25 at 10.15.04 AM.png (410.29 KiB) Viewed 234 times

Post 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.


Post 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.


Post by Animal »

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


Post by jinc »

Thank you!


Post Reply