Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styles not being applied when component is inside a collapsible element #37

Open
luizcieslak opened this issue Jul 1, 2020 · 2 comments · May be fixed by #38
Open

Styles not being applied when component is inside a collapsible element #37

luizcieslak opened this issue Jul 1, 2020 · 2 comments · May be fixed by #38

Comments

@luizcieslak
Copy link

luizcieslak commented Jul 1, 2020 •
edited

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
Copy link
Owner

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 luizcieslak linked a pull request Jul 8, 2020 that will close this issue
Open
@luizcieslak
Copy link
Author

No worries! I took a shot at #38.

vibin-230 pushed a commit to vibin-230/react-nice-dates that referenced this issue Feb 2, 2021
@kumargugloth
Merge pull request hernansartorio#37 from kumargugloth/develop
037a1a1 
no of courts issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(useGrid): fallback size when containerWidth is 0 luizcieslak/react-nice-dates
2 participants
@hernansartorio @luizcieslak