search

benitolopez / hotel-datepicker

Date range picker for hotels
https://hoteldatepicker.org
MIT License
306 stars 95 forks source link

hotel-datepicker issues with bootstrap 5.3 #189

Closed orionseye closed 3 months ago

orionseye commented 3 months ago

I am migrating from material.css to bootstrap 5.3 and experience some rendering issues of the datepicker. While with material.css everything worked fine, with Bootstrap it happens that the datepicker (sometimes) is not showing up at all. What i mean is, clicking several times into the input which triggers the datepicker (while trying to test different date range) all of the sudden, it stops showing up. Removing class 'datepicker' resolves the issue. It would make sense to rename the class, as both hotel-datepicker & Bootstrap share the same class which causes conflicts Do you people experience something similar?

benitolopez commented 3 months ago

I understand. Unfortunately, for backward compatibility reasons I cannot rename the class now. But I can add a new option that allows you to define the datepicker class. It should solve your issue.

orionseye commented 3 months ago

Thanks Beni, that would be very helpful. Nice app, love it :)

orionseye commented 3 months ago

@benitolopez just as a hint: i inspected the whole issue again and it seems that somehow the dynamic style of the hotel-datepicker conflicts with Bootstrap 5,x Actually the datepicker opens but not visible due to missing height in css. Open/closing several times, all of the sudden the css generated assigns no height to the datepicker with "style="height: 0px;"

<div id="datepicker-datespick" style="height: 0px; transition: height 0.5s ease 0s;" class="datepicker datepicker--topbar-top datepicker--topbar-has-close-button  datepicker--closed" tabindex="0"><div class="datepicker__inner">
...
solidaverage commented 3 months ago

Just as another datapoint: we've had similar problems. Not with boostrap, but with the class/id name "datepicker" being very common and causing namespace collisions with other code. We've been able to work around it, but a way to easily change it would be helpful.

We haven't had problems with the other class/id names. I guess because the double underscore and double hyphen conventions in the other classes/ids aren't as widely used.

Thanks @benitolopez

benitolopez commented 3 months ago

Added in 4.8.0