Sidebar Overflow Display Issues with CalciteInputDatePicker

[jwilner_amica]

I am having an issue with a calcite component conflicting with a sidebar. The sidebar overlays itself on top of the calcite component dropdown, even with overlayPositioning set to fixed. I have tried adjusting the z-index of the pop-up itself, and suspect that may be the solution, but have been unsuccessful so far. The area below the sidebar's bottom cannot be used either.

The app in question must remain in the sidebar, as the arrow allows the user to expand to see advanced options. The date picker is defined as:

import { CalciteInputDatePicker } from '@esri/calcite-components-react'

<CalciteInputDatePicker className='date-picker' overlayPositioning='fixed'/>

Any help would be much appreciated! Thank you!

[ZhenZhang22]

😊Hi @jwilner_amica, This may be related to the mechanism of component pop-ups. Each widget has a Z context. For pop-up content, if it does not exceed the widget's bounds, the Z context of the widget manages the layering relationship between components. However, if it exceeds the widget's bounds, it will be managed by the higher-level Z context. In this case, if other components have a higher Z value than this widget, the pop-up content within the widget may be obscured.

Based on this component mechanism, it is recommended that you enlarge the sidebar widget so that it can accommodate the pop-up content, which can help prevent this issue.

I hope this can be helpful to you. Thank you!

[jwilner_amica]

Thank you, @ZhenZhang22 

I understand that I can make it larger, but the larger I make it, the more of the map that it blocks. For the case of this application, it is not feasible to make the panel more than double the height. Is there no way to have any control over the z-indexing, even when using components from within Esri's Calcite design system?

If this is the case, is there any way to programmatically update the size of a window? Otherwise, I cannot think of any other way to have a reasonably sized, set-size resizable window, that utilizes a date picker component, which would be unfortunate.

Thank you.

[jwilner_amica · Accepted solution]

@ZhenZhang22 

I have found a workaround, which may not be intended, but functions quite beautifully. This has a few steps:

* Position the widget in a sidebar, set to default mode expanded, resizable off. For whatever reason, the expanded state removes any functionality conflict with the calendar pop-up, leaving only visual conflicts.

* Remove all visual elements of the sidebar (button, border)

* Position the map in the non-side panel section of the sidebar

* Directly select the sidebar position element in the DOM, as such, using the widget ID from the props:

resizeContainer.current = document.querySelector('[data-widgetid="'+props.widgetId+'"]').parentElement.parentElement.parentElement.parentElement.parentElement;

Now, by setting style properties on that element directly, you can control the size of the sidebar top panel, and it will even animate nicely for you! In my case:

<button onClick={() => {
    if (advancedShown.current) {
        resizeContainer.current.style.height = '130px'
    } else {
        resizeContainer.current.style.height = '300px'
    }
    advancedShown.current = !advancedShown.current
}}>
    Advanced
</button>

Obviously, direct DOM manipulation in React is not an elegant way to solve a problem, and this may be subject to breaking changes in the future. But for now, if anyone is looking to use a pop-up element that goes outside of a widget with set resize options for the user, this may be the way to go about it. You should ensure the panel size matches your unexpanded size in the Experience Builder user interface, and that your widget sizes within the sidebar are set to scale by %, rather than px. Also, if using calcite components, make sure overlay-positioning='fixed'.