Fix: set minimum width for the calendar 300

[roberbnd]

What Add 300 as minimum value for the width in the calendar div

Why calendar.clientWidth was returning 0

[uvarov-frontend]

Hello, thank you for your contribution. Please explain why you need a manually set width? In what cases can ‘calendar.clientWidth’ be 0? I think we need to deal with this and find out the reason and fix it, instead of specifying the width manually.

[roberbnd]

In what cases can ‘calendar.clientWidth’ be 0? In the first render, when you create the calendar

calendar comes from an empty div

only I am using the value already used in the class .vanilla-calendar

[ghiscoding]

@roberbnd Do you mean that you're trying to use it inside a newly created modal window and the date picker client width is 0, is that the problem that you're having?

[roberbnd]

@ghiscoding I have the same issue that you fixed: calendar outside of the viewport

I tested your change with slickgrid and still there in the first render.

calendar.clientWidth returns 0 then left + 0 > vw is going to return false when at least we have 300px of width for the calendar

[ghiscoding]

I think the question would be why is the width ever at 0px? Also why did you decide on 300px, the picker is 272px when I query it.

What offsetWidth, is it also 0px? Per this Stack Overflow answer, it looks like we should maybe switch to offsetWidth

The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner width of an element in pixels

[roberbnd]

@ghiscoding why is the width ever at 0px? no always, only in the first render when the code needs to calculate the position, I see the same issue

why did you decide on 300px, the picker is 272px when I query it. here 272px is the min-width allowed but the width assigned to calendar is 300px

What offsetWidth, is it also 0px? yes, it is 0px

[ghiscoding]

I'm surprised that .offsetWidth doesn't work, but there's still other things you could try, however both of these other methods will return a string with the px suffix (like "272px" instead of the number 272) so if that works you will have to parse it

window.getComputedStyle(elm).width; // or clientWidth or offsetWidth

// or
elm.getBoundingClientRect().width;

if that also doesn't work then I'm out of idea

[uvarov-frontend]

@roberbnd I'm very interested in looking at the source code and finding out why this happens. Will you be able to reproduce this issue on the codesandbox.io or any other sandbox? Thanks in advance for your time in troubleshooting this issue.

[uvarov-frontend]

@ghiscoding My friend, how can I contact you directly and ask a couple of questions about the calendar? Will you be able to write to me on telegram? Link in my profile.

[ghiscoding]

@uvarov-frontend would it be possible to discuss it just in GitHub? You can open a discussion on one of the project I use your calendar if you want, it's Slickgrid-Universal. I would prefer GitHub mostly because it's easier to share code, I don't use telegram so much and certainly not on the computer. Unless you had something more personal to ask?

[uvarov-frontend]

@ghiscoding I have a couple of personal questions about the project, or more precisely about how best to implement v3.0.0, which I wanted to discuss in private messages. But if this is not possible, don't worry. :)

[uvarov-frontend]

@roberbnd Thanks for your time and input, but I don't think this PR is suitable for everyone who uses this calendar.