search

Twipped / Kalendae

A javascript date picker that just works.
MIT License
1.99k stars 285 forks source link

Doesn't position correctly when using css transform #178

Closed nickforddev closed 8 years ago

nickforddev commented 8 years ago

If I initialize Kalendae on an input element that is inside an element that is positioned using css transforms, Kalendae positions itself as it the parent element was not transformed.

The type of css transform I'm using:

.parent { transform: translateX(-50%) translateY(-50%) }

If I disable the css transform, the input and Kalendae line up.

Have you considered inserting the Kalendae input modules after the input, with an absolute position, instead of at the end of <body> with fixed positioning? It should solve the issue.

I'm going to have to fix this for my own use, asap, so I may issue a pull request if this sounds reasonable to you.

Twipped commented 8 years ago

Kalendae binds to the body specifically because binding to the input's parent caused problems with overflow:hidden. If the input is inside a scrolling div, for example, you don't want the date picker to get cut off inside the div. This was an issue we regularly ran into with the other date pickers we tried before I wrote this lib.

I didn't allow for overriding the attachment because the position code is written under the assumption that we're positioning relative to the body.

If you want to make it bind to parent, you'll need to override Kalendae.Input.prototype.show to change the positioning code.

nickforddev commented 8 years ago

Interesting. For my own purposes, I'm not terribly concerned about it being cut off by overflow: hidden, but do need it to position absolutely inside the selector's parent inside of modals that are positioned using css transforms. I was able to resolve the issue for myself, and now I understand your reasoning for the current behavior.

Thanks for your response, great plugin!