Styles not being applied when component is inside a collapsible element

[luizcieslak]

Hi, great lib! It is helping me very much.

I notice that, when the <DatePicker /> or <DateRangePicker /> is placed inside a collapsible element which in the first render has a display: none;, it doesn't render correctly.

Here is the reproduced example in codesandbox

Going further, comparing with the rendered element in the docs, I see that the wide class is not applied to .nice-dates-day and .nice-dates-grid is rendered with height: 6px.

Perhaps this happens because the initial width of the ref element is 0 and by that it can't render correctly?

I can open a PR setting a mininum height for .nice-dates-day and .nice-dates-grid but I'd like to discuss it here before to check if this is the best option available.

[hernansartorio]

Hey, sorry for the delay!

Thanks for providing a detailed issue and the example, it's very useful.

The height is calculated dynamically from the calendar's width, on mount and on resize. The problem here is that on mount the element is not rendered so the width is not available.

I think the proper solution would be to have a fallback size when the width is not available, if you want take a shot at it please do!

But a quick fix on your side for now would be to either manually trigger a resize event when you toggle the visibility, or use opacity: 0; pointer-events: none; to hide it instead of display: none;.

[luizcieslak]

No worries! I took a shot at #38.